deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): add footer component

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-02-28 07:53:11 +01:00
parent 5e95ee0b89
commit 39dfa3a8fc
2 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/layout/Footer.astro Normal file
View File

@ -0,0 +1,23 @@
---
import { Image } from 'astro:assets';
import { Icon } from 'astro-icon/components';
import logoImage from '@/assets/images/logo.png';
---
<div class="mx-auto w-full max-w-7xl px-8">
<div
class="flex w-full flex-col items-center justify-center border-t border-zinc-50 py-4 dark:border-zinc-900 md:flex-row md:justify-between">
<p
class="mb-4 block text-center font-sans text-sm font-normal leading-normal text-zinc-900 antialiased dark:text-zinc-100 md:mb-0">
© 2024
<a href="/">Astro Deploy</a>. All Rights Reserved.
</p><div class="flex gap-4 text-zinc-900 dark:text-zinc-100 sm:justify-center">
<a
href="https://github.com/deployn/astro-deploy"
class="block font-sans text-base font-light leading-relaxed text-inherit antialiased opacity-80 transition-opacity hover:opacity-100">
<Icon name="line-md:github" class="size-5" fill="currentColor" aria-hidden="true" />
</a>
</div>
</div>
</div>

6
src/layouts/BaseLayout.astro
View File

@ -1,6 +1,7 @@
--- ---
import '@/styles/globals.css'; import '@/styles/globals.css';
import Header from '@/components/layout/Header.astro'; import Header from '@/components/layout/Header.astro';
import Footer from '@/components/layout/Footer.astro';
const { title } = Astro.props; const { title } = Astro.props;
--- ---
@ -14,10 +15,11 @@ const { title } = Astro.props;
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="dark:bg-black"> <body class="flex min-h-screen flex-col dark:bg-black">
<Header /> <Header />
<main> <main class="flex-grow">
<slot /> <slot />
</main> </main>
<Footer />
</body> </body>
</html> </html>