refactor(index): create reusable component for text above logo

src/components/NotFound.astro

@@ -1,6 +0,0 @@
-<p class="relative text-4xl font-semibold text-foreground">
-  <span
-    class="absolute inset-0 opacity-0 blur-md motion-text bg-muted-foreground"
-  ></span>
-  <span class="relative opacity-0 motion-text">404</span>
-</p>

src/components/Text.astro

@@ -1,6 +1,12 @@
+---
+export interface Props {
+  text: string;
+}
+
+const { text } = Astro.props;
+---
+
 <p class="relative text-4xl font-semibold text-foreground">
-  <span
+  <span class="absolute inset-0 opacity-0 blur-md motion-text bg-muted-foreground"></span>
-    class="absolute inset-0 opacity-0 blur-md motion-text bg-muted-foreground"
+  <span class="relative opacity-0 motion-text">{text}</span>
-  ></span>
-  <span class="relative opacity-0 motion-text">z0x</span>
 </p>

src/pages/404.astro

@@ -1,12 +1,10 @@
 ---
 import Logo from "@/components/Logo.astro";
-import NotFound from "@/components/NotFound.astro";
+import Text from "@/components/Text.astro";
-import ThemeToggle from "@/components/ThemeToggle.astro";
 import Layout from "@/layouts/Layout.astro";
 ---
 
 <Layout>
-  <ThemeToggle />
+	<Text text="404"/>
-  <NotFound />
   <Logo />
 </Layout>

src/pages/index.astro

@@ -2,13 +2,11 @@
 import Links from "@/components/Links.astro";
 import Logo from "@/components/Logo.astro";
 import Text from "@/components/Text.astro";
-import ThemeToggle from "@/components/ThemeToggle.astro";
 import Layout from "@/layouts/Layout.astro";
 ---
 
 <Layout>
-	<ThemeToggle />
+	<Text text="z0x"/>
-	<Text />
 	<Logo />
 	<Links />
 </Layout>