-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
27 changed files
with
813 additions
and
174 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
apps/nextjs/src/app/(dashboard)/project/[id]/(root)/_components/sidebar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| "use client"; | ||
|
|
||
| import React, { memo } from "react"; | ||
| import Link from "next/link"; | ||
| import { usePathname } from "next/navigation"; | ||
| import { ChartArea, House, Settings, User, Workflow } from "lucide-react"; | ||
|
|
||
| import { Tooltip, TooltipContent, TooltipTrigger } from "@amaxa/ui/tooltip"; | ||
|
|
||
| export const Sidebar = memo(({ id, name }: { id: string; name: string }) => { | ||
| const pathname = usePathname(); | ||
|
|
||
| console.log(pathname); | ||
| return ( | ||
| <div> | ||
| <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-muted/40 sm:flex"> | ||
| <nav className="flex flex-col items-center gap-4 px-2 sm:py-4"> | ||
| <Link | ||
| href="/" | ||
| className={`group ${ | ||
| pathname === "/" | ||
| ? "text-accent-foreground" | ||
| : "text-muted-foreground" | ||
| } flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold md:h-8 md:w-8 md:text-base`} | ||
| > | ||
| <House className="h-5 w-5" /> | ||
| <span className="sr-only">{name}</span> | ||
| </Link> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Link | ||
| href={`/project/${id}/`} | ||
| className={`flex h-9 w-9 items-center justify-center rounded-lg | ||
| ${ | ||
| pathname === `/project/${id}` | ||
| ? "text-accent-foreground" | ||
| : "text-muted-foreground" | ||
| } | ||
| transition-colors hover:text-foreground md:h-8 md:w-8`} | ||
| > | ||
| <ChartArea className="h-5 w-5" /> | ||
| <span className="sr-only">Dashboard</span> | ||
| </Link> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right">Dashboard</TooltipContent> | ||
| </Tooltip> | ||
|
|
||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Link | ||
| href={`/project/${id}/tasks`} | ||
| className={`flex h-9 w-9 items-center justify-center rounded-lg ${ | ||
| pathname === `/project/${id}/tasks` | ||
| ? "text-accent-foreground" | ||
| : "text-muted-foreground" | ||
| } transition-colors hover:text-foreground md:h-8 md:w-8`} | ||
| > | ||
| <Workflow className="h-5 w-5" /> | ||
| <span className="sr-only">Tasks</span> | ||
| </Link> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right">Tasks</TooltipContent> | ||
| </Tooltip> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Link | ||
| href={`/project/${id}/permissions`} | ||
| className={`flex h-9 w-9 items-center justify-center ${ | ||
| pathname === `/project/${id}/permissions` | ||
| ? "text-accent-foreground" | ||
| : "text-muted-foreground" | ||
| } rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8`} | ||
| > | ||
| <User className="h-5 w-5 " /> | ||
| <span className="sr-only">Users</span> | ||
| </Link> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right">Users</TooltipContent> | ||
| </Tooltip> | ||
| </nav> | ||
| <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-4"> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Link | ||
| href={`/project/${id}/settings`} | ||
| className={`flex h-9 w-9 items-center justify-center rounded-lg | ||
| ${ | ||
| pathname.includes("settings") | ||
| ? "text-accent-foreground" | ||
| : "text-muted-foreground" | ||
| } | ||
| transition-colors hover:text-foreground md:h-8 md:w-8`} | ||
| > | ||
| <Settings className="h-5 w-5" /> | ||
| <span className="sr-only">Settings</span> | ||
| </Link> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right">Settings</TooltipContent> | ||
| </Tooltip> | ||
| </nav> | ||
| </aside> | ||
| </div> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
apps/nextjs/src/app/(dashboard)/project/[id]/(root)/settings/_components/header.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import Link from "next/link"; | ||
| import { CircleUser, Menu, Package2, Search } from "lucide-react"; | ||
|
|
||
| import { Button } from "@amaxa/ui/button"; | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuLabel, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuTrigger, | ||
| } from "@amaxa/ui/dropdown-menu"; | ||
| import { Input } from "@amaxa/ui/input"; | ||
| import { Sheet, SheetContent, SheetTrigger } from "@amaxa/ui/sheet"; | ||
|
|
||
| import type { NavItem } from "./types"; | ||
| import Sidebar from "./sidebar"; | ||
|
|
||
| interface HeaderProps { | ||
| navItems: NavItem[]; | ||
| } | ||
|
|
||
| export default function Header({ navItems }: HeaderProps): JSX.Element { | ||
| return ( | ||
| <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6"> | ||
| <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6"> | ||
| <Link | ||
| href="#" | ||
| className="flex items-center gap-2 text-lg font-semibold md:text-base" | ||
| > | ||
| <Package2 className="h-6 w-6" /> | ||
| <span className="sr-only">Acme Inc</span> | ||
| </Link> | ||
| {navItems.map((item) => ( | ||
| <Link | ||
| key={item.href} | ||
| href={item.href} | ||
| className="text-muted-foreground transition-colors hover:text-foreground" | ||
| > | ||
| {item.label} | ||
| </Link> | ||
| ))} | ||
| </nav> | ||
| <Sheet> | ||
| <SheetTrigger asChild> | ||
| <Button variant="outline" size="icon" className="shrink-0 md:hidden"> | ||
| <Menu className="h-5 w-5" /> | ||
| <span className="sr-only">Toggle navigation menu</span> | ||
| </Button> | ||
| </SheetTrigger> | ||
| <SheetContent side="left"> | ||
| <Sidebar navItems={navItems} /> | ||
| </SheetContent> | ||
| </Sheet> | ||
| <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4"> | ||
| <form className="ml-auto flex-1 sm:flex-initial"> | ||
| <div className="relative"> | ||
| <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> | ||
| <Input | ||
| type="search" | ||
| placeholder="Search products..." | ||
| className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]" | ||
| /> | ||
| </div> | ||
| </form> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <Button variant="secondary" size="icon" className="rounded-full"> | ||
| <CircleUser className="h-5 w-5" /> | ||
| <span className="sr-only">Toggle user menu</span> | ||
| </Button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end"> | ||
| <DropdownMenuLabel>My Account</DropdownMenuLabel> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem>Settings</DropdownMenuItem> | ||
| <DropdownMenuItem>Support</DropdownMenuItem> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem>Logout</DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> | ||
| </header> | ||
| ); | ||
| } |
30 changes: 30 additions & 0 deletions
30
apps/nextjs/src/app/(dashboard)/project/[id]/(root)/settings/_components/sidebar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| "use client"; | ||
|
|
||
| import Link from "next/link"; | ||
| import { usePathname } from "next/navigation"; | ||
|
|
||
| import type { NavItem } from "./types"; | ||
|
|
||
| interface SidebarProps { | ||
| navItems: NavItem[]; | ||
| } | ||
|
|
||
| export default function Sidebar({ navItems }: SidebarProps): JSX.Element { | ||
| const pathname = usePathname(); | ||
|
|
||
| return ( | ||
| <nav className="grid gap-4 text-sm text-muted-foreground"> | ||
| {navItems.map((item) => ( | ||
| <Link | ||
| key={item.href} | ||
| href={item.href} | ||
| className={`font-semibold transition-colors hover:text-foreground ${ | ||
| pathname === item.href ? "text-primary" : "" | ||
| }`} | ||
| > | ||
| {item.label} | ||
| </Link> | ||
| ))} | ||
| </nav> | ||
| ); | ||
| } |
4 changes: 4 additions & 0 deletions
4
apps/nextjs/src/app/(dashboard)/project/[id]/(root)/settings/_components/types.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export interface NavItem { | ||
| href: string; | ||
| label: string; | ||
| } |
Oops, something went wrong.