v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

navigation

Browse source
This commit is contained in:
isaconantonis 2023-08-02 12:26:35 +02:00
parent 407016b57c
commit 6cfca1aa16
10 changed files with 1644 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

31
components/Button/Button.stories.tsx
View file

@ -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

47
components/Button/Button.tsx
View file

@ -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>
)
}

130
components/Navbar/Navbar.tsx
View file

@ -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>
)
}