#1 Implements SocialNav component

raeperd · Jan 8, 2022 · 04fc5c5 · 04fc5c5
1 parent 6c8f7ec
commit 04fc5c5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 24 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-export default function Header({ siteName, menus }: HeaderProps) {
+export default function Header({ siteName, menus, socials }: HeaderProps) {
   return (
     <header className="header">
       <h1 className="logo">
@@ -12,21 +12,18 @@ export default function Header({ siteName, menus }: HeaderProps) {
         <a className="btn-dark" />
       </h1>
       <MenuNav menus={menus} />
+      <SocialNav socials={socials} />
     </header>
   )
 }
 
-type HeaderProps = {
+export interface HeaderProps {
   siteName: string,
-  menus: Menu[]
+  menus: MenuProps[],
+  socials: SocialProps[]
 }
 
-type Menu = {
-  name: string,
-  href: string
-}
-
-function MenuNav({ menus }: {menus: Menu[]}) {
+function MenuNav({ menus }: {menus: MenuProps[]}) {
   const router = useRouter()
   return (
     <nav className="menu">
@@ -38,3 +35,31 @@ function MenuNav({ menus }: {menus: Menu[]}) {
     </nav>
   )
 }
+
+interface MenuProps {
+  name: string,
+  href: string
+}
+
+function SocialNav({ socials }: {socials: SocialProps[]}) {
+  return (
+    <nav className="social">
+      {socials
+        .filter((social) => social.id)
+        .map((social) => (
+          <a href={`//${social.name}.com/${social.id}`}>
+            <img
+              id={social.name}
+              src={`./${social.name}.svg`}
+              alt={`${social.name}`}
+            />
+          </a>
+        ))}
+    </nav>
+  )
+}
+
+interface SocialProps {
+  name: 'instagram' | 'github' | 'twitter',
+  id?: string
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,26 +1,22 @@
-import Header from '../components/Header';
+import Header, { HeaderProps } from '../components/Header';
 
-export default function Index({ siteName, menus }: IndexProps) {
+export default function Index({ siteName, menus, socials }: HeaderProps) {
   return (
-    <Header siteName={siteName} menus={menus} />
+    <Header siteName={siteName} menus={menus} socials={socials} />
   )
 }
 
-type IndexProps = {
-  siteName: string,
-  menus: MenuProps[]
-}
-
-type MenuProps = {
-  name: string
-  href: string
-}
-
-export async function getStaticProps() {
+export async function getStaticProps(): Promise<{ props: HeaderProps }> {
+  const siteName = process.env.SITE_NAME ? process.env.SITE_NAME : 'Paper'
   return {
     props: {
-      siteName: process.env.SITE_NAME,
+      siteName,
       menus: [{ name: 'About', href: '/about' }],
+      socials: [
+        { name: 'github', id: process.env.GITHUB },
+        { name: 'twitter', id: process.env.TWITTER },
+        { name: 'instagram', id: process.env.INSTAGRAM },
+      ],
     },
   }
 }