From 79027d9d50c8d8334d2089fca05342cb6182e65a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Berente?=
 <30603208+berenteb@users.noreply.github.com>
Date: Thu, 14 Dec 2023 17:33:04 +0100
Subject: [PATCH] feat: footer improvements

---
 src/app/layout.tsx                       | 30 ++-------------------
 src/components/footer/desktop-footer.tsx | 33 ++++++++++++++++++++++++
 src/components/footer/footer.tsx         | 11 ++++++++
 src/components/footer/mobile-footer.tsx  |  9 +++++++
 src/components/navbar/desktop-navbar.tsx | 13 ++--------
 src/components/uni-logos.tsx             | 17 ++++++++++++
 6 files changed, 74 insertions(+), 39 deletions(-)
 create mode 100644 src/components/footer/desktop-footer.tsx
 create mode 100644 src/components/footer/footer.tsx
 create mode 100644 src/components/footer/mobile-footer.tsx
 create mode 100644 src/components/uni-logos.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8408219..2f45b92 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,10 +2,8 @@ import './globals.css';
 
 import type { Metadata } from 'next';
 import { Raleway } from 'next/font/google';
-import Image from 'next/image';
-import Link from 'next/link';
-import { FaFacebook, FaInstagram, FaYoutube } from 'react-icons/fa';
 
+import { Footer } from '@/components/footer/footer';
 import { Navbar } from '@/components/navbar/navbar';
 
 const raleway = Raleway({ subsets: ['latin'] });
@@ -26,31 +24,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <div className='max-w-6xl p-20 mx-auto relative h-full w-full flex justify-center items-center'>
             {children}
           </div>
-          <div className='p-10 md:p-15 flex justify-between items-center flex-wrap gap-10 flex-col md:flex-row'>
-            <div className='flex items-center gap-5 text-[40px]'>
-              <Link href='https://www.instagram.com/simonyikonf' className='brand-link' target='blank'>
-                <FaInstagram />
-              </Link>
-              <Link href='https://www.facebook.com/events/1060756212046229' className='brand-link' target='blank'>
-                <FaFacebook />
-              </Link>
-              <Link
-                href='https://www.youtube.com/watch?v=QDKDaMKqcoQ&list=PLovp3RCdzQGx_lKpvCgUJT6n-wJazXKrL'
-                className='brand-link'
-                target='blank'
-              >
-                <FaYoutube />
-              </Link>
-            </div>
-            <div className='flex items-center gap-10'>
-              <Link href='https://schdesign.hu' className='brand-link' target='blank'>
-                <Image className='-mb-2' src='/img/schdesign.svg' alt='schdesign' width={148} height={40} />
-              </Link>
-              <Link href='https://kir-dev.hu' className='brand-link' target='blank'>
-                <Image src='/img/kirdev-inline.svg' alt='Kir-Dev' width={193} height={40} />
-              </Link>
-            </div>
-          </div>
+          <Footer />
         </main>
       </body>
     </html>
diff --git a/src/components/footer/desktop-footer.tsx b/src/components/footer/desktop-footer.tsx
new file mode 100644
index 0000000..92a9c52
--- /dev/null
+++ b/src/components/footer/desktop-footer.tsx
@@ -0,0 +1,33 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { FaFacebook, FaInstagram, FaYoutube } from 'react-icons/fa';
+
+export function DesktopFooter() {
+  return (
+    <footer className='hidden md:flex p-10 justify-between items-center gap-10 flex-row'>
+      <div className='flex items-center gap-5 text-[40px]'>
+        <Link href='https://www.instagram.com/simonyikonf' className='brand-link' target='blank'>
+          <FaInstagram />
+        </Link>
+        <Link href='https://www.facebook.com/events/1060756212046229' className='brand-link' target='blank'>
+          <FaFacebook />
+        </Link>
+        <Link
+          href='https://www.youtube.com/watch?v=QDKDaMKqcoQ&list=PLovp3RCdzQGx_lKpvCgUJT6n-wJazXKrL'
+          className='brand-link'
+          target='blank'
+        >
+          <FaYoutube />
+        </Link>
+      </div>
+      <div className='flex items-center gap-10'>
+        <Link href='https://schdesign.hu' className='brand-link' target='blank'>
+          <Image className='-mb-2' src='/img/schdesign.svg' alt='schdesign' width={148} height={40} />
+        </Link>
+        <Link href='https://kir-dev.hu' className='brand-link' target='blank'>
+          <Image src='/img/kirdev-inline.svg' alt='Kir-Dev' width={193} height={40} />
+        </Link>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
new file mode 100644
index 0000000..b0258b0
--- /dev/null
+++ b/src/components/footer/footer.tsx
@@ -0,0 +1,11 @@
+import { DesktopFooter } from '@/components/footer/desktop-footer';
+import { MobileFooter } from '@/components/footer/mobile-footer';
+
+export function Footer() {
+  return (
+    <>
+      <MobileFooter />
+      <DesktopFooter />
+    </>
+  );
+}
diff --git a/src/components/footer/mobile-footer.tsx b/src/components/footer/mobile-footer.tsx
new file mode 100644
index 0000000..80f35a7
--- /dev/null
+++ b/src/components/footer/mobile-footer.tsx
@@ -0,0 +1,9 @@
+import { UniLogos } from '@/components/uni-logos';
+
+export function MobileFooter() {
+  return (
+    <footer className='flex md:hidden p-10 justify-end'>
+      <UniLogos />
+    </footer>
+  );
+}
diff --git a/src/components/navbar/desktop-navbar.tsx b/src/components/navbar/desktop-navbar.tsx
index 1a2a239..c0f759d 100644
--- a/src/components/navbar/desktop-navbar.tsx
+++ b/src/components/navbar/desktop-navbar.tsx
@@ -1,19 +1,10 @@
-import Image from 'next/image';
-import Link from 'next/link';
-
 import { NavbarItems } from '@/components/navbar/navbar-items';
+import { UniLogos } from '@/components/uni-logos';
 
 export function DesktopNavbar() {
   return (
     <nav className='hidden md:flex p-10 md:p-15 justify-between items-center flex-wrap gap-10 flex-col md:flex-row'>
-      <div className='flex items-center gap-10'>
-        <Link href='https://simonyi.bme.hu' className='brand-link' target='blank'>
-          <Image src='/img/simonyi.svg' alt='Simonyi Károly Szakkollégium' width={193} height={40} />
-        </Link>
-        <Link href='https://vik.bme.hu' className='brand-link' target='blank'>
-          <Image src='/img/vik.svg' alt='Vik' width={40} height={40} />
-        </Link>
-      </div>
+      <UniLogos />
       <div className='flex items-center gap-10'>
         <NavbarItems />
       </div>
diff --git a/src/components/uni-logos.tsx b/src/components/uni-logos.tsx
new file mode 100644
index 0000000..bf1a0cd
--- /dev/null
+++ b/src/components/uni-logos.tsx
@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import Link from 'next/link';
+import { HTMLAttributes } from 'react';
+
+export function UniLogos({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={clsx('flex items-center gap-10', className)} {...props}>
+      <Link href='https://vik.bme.hu' className='brand-link' target='blank'>
+        <Image src='/img/vik.svg' alt='Vik' width={40} height={40} />
+      </Link>
+      <Link href='https://simonyi.bme.hu' className='brand-link' target='blank'>
+        <Image src='/img/simonyi.svg' alt='Simonyi Károly Szakkollégium' width={193} height={40} />
+      </Link>
+    </div>
+  );
+}