pchl/src/pages/index.tsx

96 lines
2.4 KiB
TypeScript

import Image from "next/image";
import Link from "next/link";
import { FaGithub } from "react-icons/fa";
function Header() {
return (
<header className="flex w-full items-center justify-between bg-slate-800 p-8 text-white">
<Link href="/">
<Image src="/logo.png" alt="My Site Logo" width={128} height={77} />
</Link>
<nav>
<ul className="flex items-center gap-2 space-x-4">
<li>
<Link href="/le-club">Le club</Link>
</li>
<li>
<Link href="/galeries">Galeries</Link>
</li>
<li>
<Link href="/contact">Contact</Link>
</li>
<li>
<Link
href="/espace-membres"
className="bg-white px-6 py-2 text-stone-900"
>
Espace membres
</Link>
</li>
</ul>
</nav>
</header>
);
}
function Footer() {
return (
<footer className="absolute bottom-0 w-full bg-neutral-800">
<div className="container mx-auto p-8">
<div className="flex flex-col items-center justify-between md:flex-row">
<div className="flex items-center md:flex-row">
<div className="flex items-center">
<Image
src="/logo.png"
alt="My Site Logo"
width={128}
height={77}
/>
</div>
<div className="ml-4 flex flex-col">
<span className="text-neutral-300">
© 2023 Photo Club de Haute Lozère
</span>
<span className="text-neutral-300">Tous droits réservés</span>
</div>
<div className="ml-4 flex">
<span className="text-neutral-300">Développé par </span>
<span className="text-neutral-300">
<a
href="https://github.com/polynux"
target="_blank"
rel="noreferrer"
>
polynux <FaGithub />
</a>
</span>
</div>
</div>
</div>
</div>
</footer>
);
}
function Layout({ children }: { children: React.ReactNode }) {
return (
<div>
<Header />
{children}
<Footer />
</div>
);
}
function Home() {
return (
<Layout>
<h1>My Site</h1>
</Layout>
);
}
export default Home;
export { Layout };