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

This commit is contained in:
z0x 2025-04-09 20:43:09 -04:00
parent 18df241880
commit 51d8c01db6
4 changed files with 13 additions and 17 deletions

View file

@ -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>

View file

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

View file

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

View file

@ -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 text="z0x"/>
<Logo />
<Links />
</Layout>