Implement beginning of footer component
Create basis of footer component. Some changes needed to put proper content in but theming, styling is all done.
This commit is contained in:
parent
3e793a5985
commit
261f0bb07f
25
components/footer.tsx
Normal file
25
components/footer.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import {IoLogoGithub, IoLogoGitlab} from "react-icons/io5";
|
||||||
|
|
||||||
|
export const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<footer className="footer grid w-full grid-flow-row place-items-center text-center gap-y-10 gap-x-4 text-sm p-10 dark:bg-black bg-white dark:text-white text-black rounded">
|
||||||
|
<div className="grid grid-flow-col gap-4">
|
||||||
|
<Link href="/"><a className="link link-hover">Home</a></Link>
|
||||||
|
<Link href="/"><a className="link link-hover">Home 2</a></Link>
|
||||||
|
<Link href="/"><a className="link link-hover">Home 3</a></Link>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="grid grid-flow-col gap-4">
|
||||||
|
<Link href="/"><a><IoLogoGithub></IoLogoGithub></a></Link>
|
||||||
|
<Link href="/"><a><IoLogoGitlab></IoLogoGitlab></a></Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Made with ❤️ by Nick Bland</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,5 +1,6 @@
|
|||||||
import type {NextPage} from 'next';
|
import type {NextPage} from 'next';
|
||||||
import NavBar from "../components/navbar";
|
import NavBar from "../components/navbar";
|
||||||
|
import {Footer} from "../components/footer"
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
return (
|
return (
|
||||||
@ -7,9 +8,13 @@ const Home: NextPage = () => {
|
|||||||
<NavBar title="Home | nickbland.dev"></NavBar>
|
<NavBar title="Home | nickbland.dev"></NavBar>
|
||||||
|
|
||||||
<main className="">
|
<main className="">
|
||||||
<h1>Test Comment</h1>
|
{/* MAIN BANNER SECTION BELOW */}
|
||||||
|
<div className="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
<Footer></Footer>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user