From c89df4cf2f7ffa987cc3fb9734b8e9b4e15aff2b Mon Sep 17 00:00:00 2001
From: AderKonstantin <aderkonstantin9@gmail.com>
Date: Wed, 26 Mar 2025 15:38:02 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20feat(footer):=20Add=20new=20foot?=
 =?UTF-8?q?er=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/layout.tsx             | 80 +------------------------------------
 components/footer/main.tsx | 81 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 78 deletions(-)
 create mode 100644 components/footer/main.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 421d99b..c0945a8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,8 @@
 import type { Metadata } from "next";
 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 MainFooter from "@/components/footer/main";
 
 export const metadata: Metadata = {
   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">
           <MainHeader />
           {children}
-
-          <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>
+          <MainFooter />
         </div>
       </body>
     </html>
diff --git a/components/footer/main.tsx b/components/footer/main.tsx
new file mode 100644
index 0000000..8201046
--- /dev/null
+++ b/components/footer/main.tsx
@@ -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>
+    );
+}
\ No newline at end of file