feat: footer improvements

simonyiszk · Dec 14, 2023 · 4a2b491 · 4a2b491
1 parent 8c9d7e7
commit 4a2b491
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 39 deletions.
diff --git 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'] });
@@ -24,31 +22,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <main className='grid grid-rows-[auto_1fr_auto] h-full'>
           <Navbar />
           <div className='max-w-xl p-20 mx-auto relative h-full w-full flex 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+  );
+}