feat: define layout

Gatheria · Nov 20, 2024 · 2728d7b · 2728d7b
1 parent a62d501
commit 2728d7b
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git a/app/_components/header/logo.tsx b/app/_components/header/logo.tsx
@@ -1,8 +1,12 @@
+import Link from "next/link"
+
 export default function Logo() {
   return (
     <>
-      {/* TODO: Put Logo Here */}
-      <span>Logo</span>
+      <Link href="/">
+        {/* TODO: Put Logo Here */}
+        <span>Logo</span>
+      </Link>
     </>
   )
 }
diff --git a/app/_components/header/nav-bar.tsx b/app/_components/header/nav-bar.tsx
@@ -1,11 +1,15 @@
 import Link from "next/link"
 
 export default function NavBar() {
+  const navItems = [{ name: "", link: "" }]
   return (
     <>
       <nav>
-        <Link href="/about">About</Link>
-        <Link href="/contact">Contact</Link>
+        {navItems.map((item, index) => (
+          <Link href={item.link} key={index}>
+            {item.name}
+          </Link>
+        ))}
       </nav>
     </>
   )

diff --git a/app/_components/layout/app-footer.tsx b/app/_components/layout/app-footer.tsx
@@ -3,6 +3,7 @@ import Copyright from "@/app/_components/footer/copyright"
 export default function AppFooter() {
   return (
     <>
+      <div className="footer-copyright"></div>
       <Copyright />
     </>
   )

diff --git a/app/_components/layout/app-header.tsx b/app/_components/layout/app-header.tsx
@@ -4,12 +4,13 @@ import NavBar from "@/app/_components/header/nav-bar"
 export default function AppHeader() {
   return (
     <>
-      <div>
+      <div className="header-logo">
         <Logo />
       </div>
-      <div>
+      <div className="header-nav">
         <NavBar />
       </div>
+      <div></div>
     </>
   )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -16,11 +16,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className="app">
-        <header>
+        <header className="app-header">
           <AppHeader />
         </header>
-        <main>{children}</main>
-        <footer>
+        <main className="app-main">{children}</main>
+        <footer className="app-footer">
           <AppFooter />
         </footer>
       </body>