Created Layout & Responsive Header Component

2024-02-01 20:28:42 +05:00
parent 9ac97c7f9a
commit bc7cad7e3b
21 changed files with 413 additions and 30 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,9 @@
-import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import type { Metadata } from 'next'
+
+import { Header } from '@/components/header'
+import { Footer } from '@/components/footer'
+
 import './globals.css'

 const inter = Inter({ subsets: ['latin'] })
@@ -16,7 +20,17 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Header />
+        <main className="w-full min-h-[calc(100vh-144px)] mt-36">
+          <div className="w-full max-w-7xl mx-auto h-full">{children}</div>
+        </main>
+        <div
+          id="modal"
+          className="flex items-center justify-center w-screen h-screen fixed top-0 left-[50%] translate-x-[-50%] z-1000 overflow-y-hidden pointer-events-none"
+        />
+        <Footer />
+      </body>
    </html>
  )
 }
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,7 +1,7 @@
 const NotFoundPage = () => (
-  <main className="w-full h-full">
-    <p>Not Found Page</p>
-  </main>
+  <div className="w-full h-full">
+    <p>404 Page</p>
+  </div>
 )

 export default NotFoundPage
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 const Home = () => (
-  <main className="w-full h-full">
-    <p>My Clean App</p>
-  </main>
+  <div className="w-full h-full">
+    <p>Home Page</p>
+  </div>
 )

 export default Home