navigation

app/layout.tsx

@@ -1,6 +1,7 @@
 import { Metadata } from "next"
 import Footer from "../components/Footer/Footer"
 import Navbar from "../components/Navbar/Navbar"
+import NextUiProvider from "../providers/NextUiProvider"
 
 import "../styles/tailwind.css"
 
@@ -31,11 +32,13 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <div className="flex min-h-screen flex-col justify-between">
+        <NextUiProvider>
-          <Navbar />
+          <div className="flex min-h-screen flex-col justify-between bg-primary-50">
-          <main className="mb-auto min-h-screen bg-primary-50">{children}</main>
+            <Navbar />
-          <Footer />
+            <main className="mb-auto h-auto">{children}</main>
-        </div>
+            <Footer />
+          </div>
+        </NextUiProvider>
       </body>
     </html>
   )

app/page.tsx

@@ -1,8 +1,4 @@
-import { getProjects } from "./actions"
-
 export default async function Web() {
-  const projects = await getProjects()
-
   return (
     <section>
       <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
@@ -10,14 +6,6 @@ export default async function Web() {
           <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
             IsaCon
           </h1>
-          {projects.map((project) => (
-            <div
-              key={project.id}
-              className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl"
-            >
-              {project.name}
-            </div>
-          ))}
         </div>
       </div>
     </section>

app/projects/page.tsx

@@ -0,0 +1,22 @@
+import { getProjects } from "../actions"
+
+export default async function Projects() {
+  const projects = await getProjects()
+
+  return (
+    <section>
+      <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+        <div className="mx-auto place-self-center">
+          {projects.map((project) => (
+            <div
+              key={project.id}
+              className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl"
+            >
+              {project.name}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

components/Button/Button.stories.tsx

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Button } from "./Button"
-
-const meta: Meta<typeof Button> = {
-  title: "Button",
-  component: Button,
-  args: {
-    intent: "primary",
-    underline: false,
-    children: "Button",
-    size: "lg",
-  },
-  argTypes: {
-    intent: {
-      options: ["primary", "secondary"],
-      control: { type: "select" },
-    },
-    size: {
-      options: ["sm", "lg"],
-      control: { type: "select" },
-    },
-  },
-}
-
-type Story = StoryObj<typeof Button>
-
-export const Default: Story = {
-  render: (args) => <Button {...args} />,
-}
-
-export default meta

components/Button/Button.tsx

@@ -1,47 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { twMerge } from "tailwind-merge"
-
-const button = cva(
-  [
-    "justify-center",
-    "inline-flex",
-    "items-center",
-    "rounded-xl",
-    "text-center",
-    "border",
-    "border-blue-400",
-    "transition-colors",
-    "delay-50",
-  ],
-  {
-    variants: {
-      intent: {
-        primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
-        secondary: ["bg-transparent", "text-blue-400", "hover:enabled:bg-blue-400", "hover:enabled:text-white"],
-      },
-      size: {
-        sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
-        lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
-      },
-      underline: { true: ["underline"], false: [] },
-    },
-    defaultVariants: {
-      intent: "primary",
-      size: "lg",
-    },
-  }
-)
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof button> {
-  underline?: boolean
-  href: string
-}
-
-export function Button({ className, intent, size, underline, ...props }: ButtonProps) {
-  return (
-    <a className={twMerge(button({ intent, size, className, underline }))} {...props}>
-      {props.children}
-    </a>
-  )
-}

components/Navbar/Navbar.tsx

@@ -1,62 +1,78 @@
+"use client"
+import {
+  Button,
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarMenu,
+  NavbarMenuItem,
+  NavbarMenuToggle,
+} from "@nextui-org/react"
+import Image from "next/image"
 import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useState } from "react"
+
+export default function Nav() {
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false)
+  const currentRoute = usePathname()
+
+  const menuItems = [
+    {
+      label: "Home",
+      href: "/",
+      current: currentRoute === "/",
+    },
+    {
+      label: "Projects",
+      href: "/projects",
+      current: currentRoute === "/projects",
+    },
+  ]
 
-export default function Navbar() {
   return (
-    <nav className="fixed w-full bg-primary-800">
+    <Navbar
-      <div className="mx-auto px-4 sm:px-6 lg:px-8">
+      className="bg-primary-800 text-primary-50"
-        <div className="flex h-16 items-center justify-between">
+      isMenuOpen={isMenuOpen || false}
-          <div className="flex items-center">
+      onMenuOpenChange={setIsMenuOpen}
-            <div className="shrink-0">
+    >
-              <img className="block h-8 w-auto" src="/Isacon logo RGB_1.png" alt="Isacon" />
+      <NavbarMenuToggle className="flex gap-4 md:hidden" />
-            </div>
+      <NavbarMenu>
-            <div className="hidden sm:ml-6 sm:block">
+        {menuItems.map((item) => (
-              <div className="flex space-x-4">
+          <NavbarMenuItem key={item.href}>
-                <Link
+            <Link
-                  href="/dashboard"
+              href={item.href}
-                  className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
+              aria-current={item.current ? "page" : undefined}
-                >
+              onClick={() => setIsMenuOpen(false)}
-                  Dashboard
+            >
-                </Link>
+              {item.label}
-                <Link
+            </Link>
-                  href="/team"
+          </NavbarMenuItem>
-                  className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
+        ))}
-                >
+      </NavbarMenu>
-                  Team
+      <NavbarBrand>
-                </Link>
+        <Image src="/Isacon logo RGB_1.png" alt="Isacon" width={40} height={40} />
-                <Link
+      </NavbarBrand>
-                  href="/projects"
+      <NavbarContent className="hidden gap-4 md:flex" justify="center">
-                  className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
+        {menuItems.map((item) => (
-                >
+          <NavbarItem key={item.href} isActive={item.current}>
-                  Projects
+            <Link href={item.href} aria-current={item.current ? "page" : undefined}>
-                </Link>
+              {item.label}
-              </div>
+            </Link>
-            </div>
+          </NavbarItem>
-          </div>
+        ))}
-          <div className="-mr-2 flex sm:hidden">
+      </NavbarContent>
-            {/* Mobile menu button */}
+      <NavbarContent justify="end">
-            <button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-primary-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+        <NavbarItem className="hidden lg:flex">
-              <span className="sr-only">Open main menu</span>
+          <Link href="#">Login</Link>
-            </button>
+        </NavbarItem>
-          </div>
+        <NavbarItem>
-        </div>
+          <Button color="primary" href="#" variant="flat">
-      </div>
+            Sign Up
-
+          </Button>
-      <div className="sm:hidden">
+        </NavbarItem>
-        <div className="space-y-1 px-2 pb-3 pt-2">
+      </NavbarContent>
-          <button className="block rounded-md bg-primary-900 px-3 py-2 text-base font-medium text-white">
+    </Navbar>
-            Dashboard
-          </button>
-          <button className="block rounded-md px-3 py-2 text-base font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
-            Team
-          </button>
-          <button className="block rounded-md px-3 py-2 text-base font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
-            Projects
-          </button>
-          <button className="block rounded-md px-3 py-2 text-base font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
-            Calendar
-          </button>
-        </div>
-      </div>
-    </nav>
   )
 }

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@next/bundle-analyzer": "^13.3.0",
+    "@nextui-org/react": "^2.0.1",
     "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
@@ -48,6 +49,7 @@
     "@t3-oss/env-nextjs": "^0.6.0",
     "@vercel/otel": "^0.3.0",
     "class-variance-authority": "^0.6.0",
+    "framer-motion": "^10.15.0",
     "lodash": "^4.17.21",
     "mongodb": "^5.7.0",
     "next": "^13.3.0",

providers/NextUiProvider.tsx

@@ -0,0 +1,6 @@
+"use client"
+import { NextUIProvider } from "@nextui-org/react"
+
+export default function NextUiProvider({ children }) {
+  return <NextUIProvider>{children}</NextUIProvider>
+}

tailwind.config.js

@@ -2,6 +2,7 @@
 const { pick, omit } = require("lodash")
 const colors = require("tailwindcss/colors")
 const defaultTheme = require("tailwindcss/defaultTheme")
+const {nextui} = require("@nextui-org/react");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -13,6 +14,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -83,7 +85,7 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [nextui],
   future: {
     hoverOnlyWhenSupported: true,
   },