WorkSimplon/brief-07-front
WorkSimplon/brief-07-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(components): add Footer and Header components

Browse Source 
Introduced two new components: Footer and Header. The Footer includes copyright and navigation links, while the Header contains the site's logo, title, and a theme selector.
This commit is contained in:
Mathis H (Avnyr) 2024-06-06 14:10:12 +02:00
parent 411a5e2614
commit 427fc265ec
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/footer.tsx Normal file
View File

@ -0,0 +1,33 @@
import {Copyright} from "lucide-react";
import Link from "next/link";
export function Footer() {
return (
<footer className={"flex flex-col-reverse md:flex-row justify-between gap-2 md:gap-1 items-center p-2 border-t-2 w-full"}>
<div className={"flex flex-row gap-1 items-center justify-center md:justify-start md:w-1/3 opacity-50"}>
<Copyright className={"w-4"}/>
<h4 className={"pr-2"}>Yidhra Studio</h4>
<p>All right reserved <em>2024</em></p>
</div>
<div className={"flex flex-col flex-wrap md:flex-row max-h-24 md:flex-nowrap gap-1 md:gap-2 items-center justify-evenly w-full md:w-1/3"}>
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
<h3 className={"text-nowrap text-center"}>Data privacy</h3>
</Link>
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
<h3 className={"text-nowrap text-center"}>Terms and conditions</h3>
</Link>
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
<h3 className={"text-nowrap text-center"}>Legal notice</h3>
</Link>
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
<h3 className={"text-nowrap text-center"}>Support Center</h3>
</Link>
</div>
<div className={"flex flex-row gap-1 items-center justify-center md:justify-end md:w-1/3"}>
</div>
</footer>
)
}

24
src/components/header.tsx Normal file
View File

@ -0,0 +1,24 @@
import Image from "next/image";
import React from "react";
import {ThemeBtnSelector} from "@/components/theme-btn-selector";
export function Header({title, children}: {title?: string, children?: React.ReactNode}) {
return (
<header className={"flex flex-col md:flex-row justify-between items-center w-full p-1 md:px-3 md:py-2 border-b-2"}>
<div className={"flex flex-row justify-center md:justify-start items-center gap-2 md:w-1/3"}>
<Image src={'yellow-bit.svg'} alt={'Logo of YeloBit'} width={42} height={42}/>
<h1 className={"font-bold text-xl align-middle text-center text-wrap"}>{title || 'YeloBit'}</h1>
</div>
<div className={"w-1/3 flex flex-row justify-center items-center"}>
{children}
</div>
<div className={"w-1/3 flex flex-row justify-end items-center"}>
<ThemeBtnSelector/>
</div>
</header>
)
}