move header and footer in components, and layout in layouts/Home
This commit is contained in:
parent
e488e15c14
commit
99c0166a40
|
|
@ -0,0 +1,41 @@
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="w-full bg-neutral-800">
|
||||
<div className="container mx-auto p-8">
|
||||
<div className="flex items-center justify-around md:flex-row">
|
||||
<Link className="flex items-center" href="/">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="Logo photo club haute lozère"
|
||||
width={128}
|
||||
height={77}
|
||||
/>
|
||||
</Link>
|
||||
<div className="ml-4 flex flex-col items-center">
|
||||
<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{" "}
|
||||
<a
|
||||
href="https://github.com/polynux"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
polynux <FaGithub className="inline" />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="flex w-full items-center justify-between bg-gray-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" className="font-poppins text-xl">
|
||||
Le club
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/galeries" className="font-poppins text-xl">
|
||||
Galeries
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="font-poppins text-xl">
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/espace-membres"
|
||||
className="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
|
||||
>
|
||||
Espace membres
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import Head from "next/head";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
export default function Layout({ children, title }: { children: React.ReactNode, title?: string }) {
|
||||
const newTitle = title ? title + " | " : "";
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{newTitle + "Photo Club Haute Lozère"}</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="description" content="Site du photo club de Haute Lozère" />
|
||||
<meta name="keywords" content="photo, club, haute, lozère" />
|
||||
<meta name="author" content="polynux" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="language" content="fr" />
|
||||
<meta property="og:title" content="Photo Club de Haute Lozère" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://photoclubhautelozere.fr" />
|
||||
<meta property="og:image" content="/logo.png" />
|
||||
<meta property="og:description" content="Site du photo club de Haute Lozère" />
|
||||
<meta property="og:site_name" content="Photo Club de Haute Lozère" />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@polynux" />
|
||||
<meta name="twitter:creator" content="@polynux" />
|
||||
<meta name="twitter:title" content="Photo Club de Haute Lozère" />
|
||||
<meta name="twitter:description" content="Site du photo club de Haute Lozère" />
|
||||
<meta name="twitter:image" content="/logo.png" />
|
||||
</Head>
|
||||
<Header />
|
||||
<main>{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1,115 +1,5 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Head from "next/head";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<header className="flex w-full items-center justify-between bg-gray-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" className="font-poppins text-xl">
|
||||
Le club
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/galeries" className="font-poppins text-xl">
|
||||
Galeries
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="font-poppins text-xl">
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/espace-membres"
|
||||
className="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
|
||||
>
|
||||
Espace membres
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="w-full bg-neutral-800">
|
||||
<div className="container mx-auto p-8">
|
||||
<div className="flex items-center justify-around md:flex-row">
|
||||
<Link className="flex items-center" href="/">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="Logo photo club haute lozère"
|
||||
width={128}
|
||||
height={77}
|
||||
/>
|
||||
</Link>
|
||||
<div className="ml-4 flex flex-col items-center">
|
||||
<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{" "}
|
||||
<a
|
||||
href="https://github.com/polynux"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
polynux <FaGithub className="inline" />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
function Layout({ children, title }: { children: React.ReactNode, title?: string }) {
|
||||
const newTitle = title ? title + " | " : "";
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{newTitle + "Photo Club Haute Lozère"}</title>
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="description" content="Site du photo club de Haute Lozère" />
|
||||
<meta name="keywords" content="photo, club, haute, lozère" />
|
||||
<meta name="author" content="polynux" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="language" content="fr" />
|
||||
<meta property="og:title" content="Photo Club de Haute Lozère" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://photoclubhautelozere.fr" />
|
||||
<meta property="og:image" content="/logo.png" />
|
||||
<meta property="og:description" content="Site du photo club de Haute Lozère" />
|
||||
<meta property="og:site_name" content="Photo Club de Haute Lozère" />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@polynux" />
|
||||
<meta name="twitter:creator" content="@polynux" />
|
||||
<meta name="twitter:title" content="Photo Club de Haute Lozère" />
|
||||
<meta name="twitter:description" content="Site du photo club de Haute Lozère" />
|
||||
<meta name="twitter:image" content="/logo.png" />
|
||||
</Head>
|
||||
<Header />
|
||||
<main>{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import Layout from "@/layouts/Home";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
|
|
@ -190,5 +80,3 @@ function Home() {
|
|||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
export { Layout };
|
||||
|
|
|
|||
|
|
@ -14,7 +14,10 @@
|
|||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"noUncheckedIndexedAccess": true
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
|
||||
"exclude": ["node_modules"]
|
||||
|
|
|
|||
Loading…
Reference in New Issue