navigation
This commit is contained in:
isaconantonis
parent
407016b57c
commit
6cfca1aa16
10 changed files with 1644 additions and 158 deletions
|
|
@ -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">
|
||||
<Navbar />
|
||||
<main className="mb-auto min-h-screen bg-primary-50">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<NextUiProvider>
|
||||
<div className="flex min-h-screen flex-col justify-between bg-primary-50">
|
||||
<Navbar />
|
||||
<main className="mb-auto h-auto">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</NextUiProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
|
|
|||
12
app/page.tsx
12
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>
|
||||
|
|
|
|||
22
app/projects/page.tsx
Normal file
22
app/projects/page.tsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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">
|
||||
<div className="mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="shrink-0">
|
||||
<img className="block h-8 w-auto" src="/Isacon logo RGB_1.png" alt="Isacon" />
|
||||
</div>
|
||||
<div className="hidden sm:ml-6 sm:block">
|
||||
<div className="flex space-x-4">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link
|
||||
href="/team"
|
||||
className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
|
||||
>
|
||||
Team
|
||||
</Link>
|
||||
<Link
|
||||
href="/projects"
|
||||
className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
|
||||
>
|
||||
Projects
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mr-2 flex sm:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<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">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:hidden">
|
||||
<div className="space-y-1 px-2 pb-3 pt-2">
|
||||
<button className="block rounded-md bg-primary-900 px-3 py-2 text-base font-medium text-white">
|
||||
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>
|
||||
<Navbar
|
||||
className="bg-primary-800 text-primary-50"
|
||||
isMenuOpen={isMenuOpen || false}
|
||||
onMenuOpenChange={setIsMenuOpen}
|
||||
>
|
||||
<NavbarMenuToggle className="flex gap-4 md:hidden" />
|
||||
<NavbarMenu>
|
||||
{menuItems.map((item) => (
|
||||
<NavbarMenuItem key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
aria-current={item.current ? "page" : undefined}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</NavbarMenuItem>
|
||||
))}
|
||||
</NavbarMenu>
|
||||
<NavbarBrand>
|
||||
<Image src="/Isacon logo RGB_1.png" alt="Isacon" width={40} height={40} />
|
||||
</NavbarBrand>
|
||||
<NavbarContent className="hidden gap-4 md:flex" justify="center">
|
||||
{menuItems.map((item) => (
|
||||
<NavbarItem key={item.href} isActive={item.current}>
|
||||
<Link href={item.href} aria-current={item.current ? "page" : undefined}>
|
||||
{item.label}
|
||||
</Link>
|
||||
</NavbarItem>
|
||||
))}
|
||||
</NavbarContent>
|
||||
<NavbarContent justify="end">
|
||||
<NavbarItem className="hidden lg:flex">
|
||||
<Link href="#">Login</Link>
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<Button color="primary" href="#" variant="flat">
|
||||
Sign Up
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
6
providers/NextUiProvider.tsx
Normal file
6
providers/NextUiProvider.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
"use client"
|
||||
import { NextUIProvider } from "@nextui-org/react"
|
||||
|
||||
export default function NextUiProvider({ children }) {
|
||||
return <NextUIProvider>{children}</NextUIProvider>
|
||||
}
|
||||
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue