refactor(index): create reusable component for text above logo
This commit is contained in:
parent
18df241880
commit
51d8c01db6
4 changed files with 13 additions and 17 deletions
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue