feat: add Navbar

subhamX · Aug 15, 2022 · 5eb792c · 5eb792c
1 parent 84ff775
commit 5eb792c
Show file tree

Hide file tree

Showing 11 changed files with 578 additions and 95 deletions.
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from "react"
+
+
+
+interface Props {
+    children: ReactNode
+}
+
+/**
+ * This component wraps everything such that we take at least 100vh height 
+ */
+export const Layout = ({ children }: Props) => (
+    // Ensure that you pass only two blocks
+    // one having content and another having footer
+    <div className="min-h-screen">
+        {children}
+    </div>
+)
diff --git a/components/MetaHead.tsx b/components/MetaHead.tsx
@@ -0,0 +1,13 @@
+import Head from "next/head";
+
+
+
+type PropsType = { title?: string }
+
+export const MetaHead = ({ title }: PropsType) => (
+    <Head>
+        <title>{`Create Next App ${title? ` - ${title}` : ''}`}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+    </Head>
+) 
diff --git a/components/Navbar.tsx/index.tsx b/components/Navbar.tsx/index.tsx
@@ -0,0 +1,100 @@
+import { Menu } from "@headlessui/react"
+import Link from "next/link"
+import { BLOG_URL, DASHBOARD_URL, FEATURES_URL_HASH, NEW_USER_WELCOME_URL } from "../../config/ScreenRoutes"
+
+
+export const Navbar = () => {
+    return (
+        <div className="mb-7 h-12 overflow-hidden mt-2 px-4 mx-auto border-b-black border-b">
+            <nav className="flex items-center justify-between">
+                <div className="font-bold text-2xl text-left flex-grow">WingMate</div>
+                <div className="hidden sm:flex justify-between flex-grow items-center">
+                    <div className="flex justify-between gap-5">
+                        <Link href={FEATURES_URL_HASH}>
+                            <div className="cursor-pointer hover:underline decoration-dashed">Features</div>
+                        </Link>
+                        <Link href={BLOG_URL}>
+                            <div className="cursor-pointer hover:underline decoration-dashed">Blog</div>
+                        </Link>
+
+                    </div>
+                    <div className="flex gap-3 items-center">
+                        {/* Only for Non Authenticated User */}
+                        <Link href={NEW_USER_WELCOME_URL}>
+                            <div className="btn btn-sm btn-primary">Login</div>
+                        </Link>
+
+                        {/* Only for Authenticated User */}
+                        <Link href={DASHBOARD_URL}>
+                            <div className="btn btn-sm btn-primary">Dashboard</div>
+                        </Link>
+
+                    </div>
+                </div>
+
+                <Menu>
+                    {({ open }) => (
+                        <>
+                            <Menu.Button className='block sm:hidden'>{open ? 'Close' : 'Menu'}</Menu.Button>
+                            <MyDropdown />
+                        </>
+                    )}
+
+                </Menu>
+
+            </nav>
+        </div>
+    )
+}
+
+
+function MyDropdown() {
+    return (
+        <>
+            <Menu.Items className='absolute top-14 left-0 bottom-0 right-0 '>
+                <Menu.Item as='div' className='cursor-pointer w-full px-5 py-4 border-b border-b-black'>
+                    <Link
+                        href={FEATURES_URL_HASH}
+                    >
+                        <div className="">
+                            Features
+                        </div>
+                    </Link>
+                </Menu.Item>
+                <Menu.Item as='div' className='cursor-pointer w-full px-5 py-4 border-b border-b-black'>
+                    <Link
+                        href={BLOG_URL}
+                    >
+                        <div className="">
+                            Blog
+                        </div>
+                    </Link>
+                </Menu.Item>
+
+                {/* Only for Non Authenticated User */}
+                <Menu.Item as='div' className='cursor-pointer w-full px-5 py-4 border-b border-b-black'>
+                    <Link
+                        href={NEW_USER_WELCOME_URL}
+                    >
+                        <div className="">
+                            Login
+                        </div>
+                    </Link>
+                </Menu.Item>
+
+                {/* Only for Authenticated User */}
+                <Menu.Item as='div' className='cursor-pointer w-full px-5 py-4 border-b border-b-black'>
+                    <Link
+                        href={DASHBOARD_URL}
+                    >
+                        <div className="">
+                            Dashboard
+                        </div>
+                    </Link>
+                </Menu.Item>
+
+            </Menu.Items>
+        </>
+
+    )
+}
diff --git a/config/ScreenRoutes.ts b/config/ScreenRoutes.ts
@@ -0,0 +1,14 @@
+
+
+
+export const NEW_USER_WELCOME_URL = '/auth/welcome'
+
+export const DASHBOARD_URL = '/dash'
+
+
+export const BLOG_URL = '#'
+
+
+
+export const FEATURES_URL_HASH = '/#features'
+
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.6.6",
     "next": "12.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -17,8 +18,12 @@
     "@types/node": "18.7.4",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
+    "autoprefixer": "^10.4.8",
+    "daisyui": "^2.24.0",
     "eslint": "8.22.0",
     "eslint-config-next": "12.2.5",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
     "typescript": "4.7.4"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,14 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import { MetaHead } from '../components/MetaHead'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <MetaHead />
+      <Component {...pageProps} />
+    </>
+  )
 }
 
 export default MyApp
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,71 +1,19 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import { Layout } from '../components/Layout/Layout'
+import { Navbar } from '../components/Navbar.tsx'
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+    <>
 
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
+      <div>
+        <Navbar/>
 
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
+      </div>
 
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
+    </>
   )
 }
 

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,26 +1,3 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,52 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      screens: {
+        xs: "460px",
+        xss: "300px",
+      },
+    },
+  },
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [
+      {
+        mytheme: {
+          "primary": "#000",
+          "primary-content": "#fff",
+
+          "secondary": "#e05759",
+          "secondary-content": "#fff",
+
+          "accent": "#46b9d6",
+          "accent-content": "#fff",
+
+          "neutral": "#fff",
+          "neutral-content": "#fff",
+
+          "base-100": "#F3EFF6",
+          // "base-100-content": "#fff",
+
+          "info": "#7FBBDC",
+          "info-content": "#fff",
+
+          "success": "#6EE2D9",
+          "success-content": "#fff",
+
+          "warning": "#F9BA4E",
+          "warning-content": "#fff",
+
+          "error": "#EF4B39",
+          "error-content": "#fff",
+        },
+      },
+      // "dracula"
+    ],
+
+  },
+}