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 Image from "next/image";
|
||||||
import Link from "next/link";
|
import Layout from "@/layouts/Home";
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -190,5 +80,3 @@ function Home() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|
||||||
export { Layout };
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,10 @@
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"incremental": true,
|
"incremental": true,
|
||||||
"noUncheckedIndexedAccess": true
|
"noUncheckedIndexedAccess": true,
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules"]
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue