🎨 feat(footer): Add new footer component
The changes in this commit introduce a new footer component to the application. The footer includes the following sections: - Socials: Links to the user's social media profiles (Instagram, Mastodon, GitHub, Steam) - Games: A link to the "Robot Fire" game - Other Projects: Links to the "cloudberrygames" and "northfamily" projects The footer is designed to be responsive, with a different layout for larger and smaller screens. The icons in the footer are also inverted to match the overall color scheme of the application.
This commit is contained in:
AderKonstantin
@@ -1,20 +1,8 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
import mastodonPic from '../public/mastodon.svg';
|
|
||||||
import githubPic from '../public/github.svg';
|
|
||||||
import instagramPic from '../public/instagram.svg';
|
|
||||||
import steamPic from '../public/steam.svg';
|
|
||||||
|
|
||||||
import gamePic from '../public/gamepad.svg';
|
|
||||||
import projectPic from '../public/project.svg';
|
|
||||||
|
|
||||||
import Image from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
import AnimatedLink from '../components/animatedLink';
|
|
||||||
|
|
||||||
import MainHeader from "@/components/header/main";
|
import MainHeader from "@/components/header/main";
|
||||||
|
import MainFooter from "@/components/footer/main";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'AderKI Blog',
|
title: 'AderKI Blog',
|
||||||
@@ -50,71 +38,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||||||
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
|
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
|
||||||
<MainHeader />
|
<MainHeader />
|
||||||
{children}
|
{children}
|
||||||
|
<MainFooter />
|
||||||
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
|
|
||||||
<ul className="list-none m-4">
|
|
||||||
<li className="text-2xl mb-3"><h3>Socials</h3></li>
|
|
||||||
<li className="inline text-xl pr-2 mr-2">
|
|
||||||
<Link href="https://www.instagram.com/aderkitty/">
|
|
||||||
<Image
|
|
||||||
src={instagramPic}
|
|
||||||
alt="lang"
|
|
||||||
width={32}
|
|
||||||
height={32}
|
|
||||||
className="inline filter brightness-0 invert"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="inline text-xl pr-2 mr-2">
|
|
||||||
<Link href="https://mastodon.social/@aderkonstantin">
|
|
||||||
<Image
|
|
||||||
src={mastodonPic}
|
|
||||||
alt="lang"
|
|
||||||
width={32}
|
|
||||||
height={32}
|
|
||||||
className="inline filter brightness-0 invert"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="inline text-xl pr-2 mr-2">
|
|
||||||
<Link href="https://github.com/AderKonstantin">
|
|
||||||
<Image
|
|
||||||
src={githubPic}
|
|
||||||
alt="lang"
|
|
||||||
width={32}
|
|
||||||
height={32}
|
|
||||||
className="inline filter brightness-0 invert"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="inline text-xl pr-2 mr-2">
|
|
||||||
<Link href="https://steamcommunity.com/yourprofile">
|
|
||||||
<Image
|
|
||||||
src={steamPic}
|
|
||||||
alt="lang"
|
|
||||||
width={32}
|
|
||||||
height={32}
|
|
||||||
className="inline filter brightness-0 invert"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul className="list-none m-4">
|
|
||||||
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
|
|
||||||
<li className="text-xl">
|
|
||||||
<AnimatedLink href="#">Robot Fire</AnimatedLink>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul className="list-none m-4">
|
|
||||||
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
|
|
||||||
<li className="text-xl">
|
|
||||||
<AnimatedLink href="#">cloudberrygames</AnimatedLink>
|
|
||||||
</li>
|
|
||||||
<li className="text-xl">
|
|
||||||
<AnimatedLink href="#">northfamily</AnimatedLink>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
81
components/footer/main.tsx
Normal file
81
components/footer/main.tsx
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
|
||||||
|
import mastodonPic from '@/public/mastodon.svg';
|
||||||
|
import githubPic from '@/public/github.svg';
|
||||||
|
import instagramPic from '@/public/instagram.svg';
|
||||||
|
import steamPic from '@/public/steam.svg';
|
||||||
|
|
||||||
|
import gamePic from '@/public/gamepad.svg';
|
||||||
|
import projectPic from '@/public/project.svg';
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import AnimatedLink from '@/components/animatedLink';
|
||||||
|
|
||||||
|
export default function MainFooter() {
|
||||||
|
return (
|
||||||
|
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
|
||||||
|
<ul className="list-none m-4">
|
||||||
|
<li className="text-2xl mb-3"><h3>Socials</h3></li>
|
||||||
|
<li className="inline text-xl pr-2 mr-2">
|
||||||
|
<Link href="https://www.instagram.com/aderkitty/">
|
||||||
|
<Image
|
||||||
|
src={instagramPic}
|
||||||
|
alt="lang"
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
className="inline filter brightness-0 invert"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="inline text-xl pr-2 mr-2">
|
||||||
|
<Link href="https://mastodon.social/@aderkonstantin">
|
||||||
|
<Image
|
||||||
|
src={mastodonPic}
|
||||||
|
alt="lang"
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
className="inline filter brightness-0 invert"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="inline text-xl pr-2 mr-2">
|
||||||
|
<Link href="https://github.com/AderKonstantin">
|
||||||
|
<Image
|
||||||
|
src={githubPic}
|
||||||
|
alt="lang"
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
className="inline filter brightness-0 invert"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="inline text-xl pr-2 mr-2">
|
||||||
|
<Link href="https://steamcommunity.com/yourprofile">
|
||||||
|
<Image
|
||||||
|
src={steamPic}
|
||||||
|
alt="lang"
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
className="inline filter brightness-0 invert"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul className="list-none m-4">
|
||||||
|
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
|
||||||
|
<li className="text-xl">
|
||||||
|
<AnimatedLink href="#">Robot Fire</AnimatedLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul className="list-none m-4">
|
||||||
|
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
|
||||||
|
<li className="text-xl">
|
||||||
|
<AnimatedLink href="#">cloudberrygames</AnimatedLink>
|
||||||
|
</li>
|
||||||
|
<li className="text-xl">
|
||||||
|
<AnimatedLink href="#">northfamily</AnimatedLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user