mirror of
https://github.com/mfts/papermark.git
synced 2025-12-20 01:03:24 +08:00
refactor: add new sidebar
This commit is contained in:
Marc Seitz
@@ -11,6 +11,9 @@
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/lib/hooks"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,72 @@
|
||||
import Sidebar from "../Sidebar";
|
||||
import { AppSidebar } from "@/components/sidebar/app-sidebar";
|
||||
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "../ui/breadcrumb";
|
||||
import { Separator } from "../ui/separator";
|
||||
import { SidebarInset, SidebarTrigger } from "../ui/sidebar";
|
||||
import { SidebarProvider } from "../ui/sidebar";
|
||||
import TrialBanner from "./trial-banner";
|
||||
|
||||
export default function AppLayout({ children }: { children: React.ReactNode }) {
|
||||
export default function AppLayout({
|
||||
breadcrumbs,
|
||||
children,
|
||||
}: {
|
||||
breadcrumbs?: { title: string; href: string }[];
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-gray-50 dark:bg-black lg:flex-row">
|
||||
<Sidebar />
|
||||
<div className="h-dvh flex-1">
|
||||
{/* Trial banner shown only on trial */}
|
||||
<TrialBanner />
|
||||
<main className="h-[calc(100dvh-60px)] flex-1 lg:h-dvh lg:p-2">
|
||||
<div className="h-full overflow-y-auto rounded-xl bg-white ring-1 ring-gray-200 dark:border-none dark:bg-gray-900 dark:ring-gray-800">
|
||||
<SidebarProvider>
|
||||
<div className="flex flex-1 flex-col gap-x-1 bg-gray-50 dark:bg-black lg:flex-row">
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<header className="flex h-10 shrink-0 items-center gap-2">
|
||||
<div className="flex items-center gap-2 px-4">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
{breadcrumbs && (
|
||||
<>
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
{breadcrumbs.length > 1 &&
|
||||
breadcrumbs.slice(0, -1).map((breadcrumb, index) => (
|
||||
<BreadcrumbItem
|
||||
key={index}
|
||||
className="hidden md:block"
|
||||
>
|
||||
<BreadcrumbLink href={breadcrumb.href}>
|
||||
{breadcrumb.title}
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
))}
|
||||
{breadcrumbs.length > 1 && (
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
)}
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>
|
||||
{breadcrumbs[breadcrumbs.length - 1].title}
|
||||
</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
{/* Trial banner shown only on trial */}
|
||||
<TrialBanner />
|
||||
<main className="flex-1">
|
||||
{/* <div className="overflow-y-auto rounded-xl bg-white ring-1 ring-gray-200 dark:border-none dark:bg-gray-900 dark:ring-gray-800"> */}
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
{/* </div> */}
|
||||
</main>
|
||||
</SidebarInset>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
|
||||
248
components/sidebar/app-sidebar.tsx
Normal file
248
components/sidebar/app-sidebar.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import * as React from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { TeamContextType, initialState, useTeam } from "@/context/team-context";
|
||||
import Cookies from "js-cookie";
|
||||
import {
|
||||
AudioWaveform,
|
||||
BookOpen,
|
||||
Bot,
|
||||
CogIcon,
|
||||
Command,
|
||||
ContactIcon,
|
||||
FolderIcon,
|
||||
Frame,
|
||||
GalleryVerticalEnd,
|
||||
LifeBuoy,
|
||||
Loader,
|
||||
Map,
|
||||
PaletteIcon,
|
||||
PieChart,
|
||||
Send,
|
||||
ServerIcon,
|
||||
Settings2,
|
||||
SquareTerminal,
|
||||
} from "lucide-react";
|
||||
|
||||
import { NavMain } from "@/components/sidebar/nav-main";
|
||||
import { NavUser } from "@/components/sidebar/nav-user";
|
||||
import { TeamSwitcher } from "@/components/sidebar/team-switcher";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
|
||||
import { usePlan } from "@/lib/swr/use-billing";
|
||||
import useLimits from "@/lib/swr/use-limits";
|
||||
import { nFormatter } from "@/lib/utils";
|
||||
|
||||
import ProBanner from "../billing/pro-banner";
|
||||
import { Progress } from "../ui/progress";
|
||||
|
||||
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||||
const router = useRouter();
|
||||
const [showProBanner, setShowProBanner] = useState<boolean | null>(null);
|
||||
const { currentTeam, teams, setCurrentTeam, isLoading }: TeamContextType =
|
||||
useTeam() || initialState;
|
||||
const { plan: userPlan, trial: userTrial } = usePlan();
|
||||
const { limits } = useLimits();
|
||||
const linksLimit = limits?.links;
|
||||
const documentsLimit = limits?.documents;
|
||||
|
||||
useEffect(() => {
|
||||
if (Cookies.get("hideProBanner") !== "pro-banner") {
|
||||
setShowProBanner(true);
|
||||
} else {
|
||||
setShowProBanner(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const data = {
|
||||
navMain: [
|
||||
{
|
||||
title: "All Documents",
|
||||
url: "/documents",
|
||||
icon: FolderIcon,
|
||||
current:
|
||||
router.pathname.includes("documents") &&
|
||||
!router.pathname.includes("tree") &&
|
||||
!router.pathname.includes("datarooms"),
|
||||
},
|
||||
{
|
||||
title: "All Datarooms",
|
||||
url: "/datarooms",
|
||||
icon: ServerIcon,
|
||||
current: router.pathname.includes("datarooms"),
|
||||
},
|
||||
{
|
||||
title: "Visitors",
|
||||
url: "/visitors",
|
||||
icon: ContactIcon,
|
||||
current: router.pathname.includes("visitors"),
|
||||
},
|
||||
{
|
||||
title: "Branding",
|
||||
url: "/branding",
|
||||
icon: PaletteIcon,
|
||||
current:
|
||||
router.pathname.includes("branding") &&
|
||||
!router.pathname.includes("datarooms"),
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
url: "/settings/general",
|
||||
icon: CogIcon,
|
||||
isActive:
|
||||
router.pathname.includes("settings") &&
|
||||
!router.pathname.includes("branding") &&
|
||||
!router.pathname.includes("datarooms") &&
|
||||
!router.pathname.includes("documents"),
|
||||
items: [
|
||||
{
|
||||
title: "General",
|
||||
url: "/settings/general",
|
||||
current: router.pathname.includes("settings/general"),
|
||||
},
|
||||
{
|
||||
title: "People",
|
||||
url: "/settings/people",
|
||||
current: router.pathname.includes("settings/people"),
|
||||
},
|
||||
{
|
||||
title: "Domains",
|
||||
url: "/settings/domains",
|
||||
current: router.pathname.includes("settings/domains"),
|
||||
},
|
||||
{
|
||||
title: "Billing",
|
||||
url: "/settings/billing",
|
||||
current: router.pathname.includes("settings/billing"),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<Sidebar
|
||||
className="bg-gray-50 dark:bg-black"
|
||||
side="left"
|
||||
variant="inset"
|
||||
collapsible="icon"
|
||||
{...props}
|
||||
>
|
||||
<SidebarHeader className="gap-y-8">
|
||||
<p className="hidden w-full justify-center text-2xl font-bold tracking-tighter text-black group-data-[collapsible=icon]:inline-flex dark:text-white">
|
||||
<Link href="/documents">P</Link>
|
||||
</p>
|
||||
<p className="ml-2 flex items-center text-2xl font-bold tracking-tighter text-black group-data-[collapsible=icon]:hidden dark:text-white">
|
||||
<Link href="/documents">Papermark</Link>
|
||||
{userPlan && userPlan != "free" ? (
|
||||
<span className="ml-4 rounded-full bg-background px-2.5 py-1 text-xs tracking-normal text-foreground ring-1 ring-gray-800">
|
||||
{userPlan.charAt(0).toUpperCase() + userPlan.slice(1)}
|
||||
</span>
|
||||
) : null}
|
||||
{userTrial ? (
|
||||
<span className="ml-2 rounded-sm bg-foreground px-2 py-0.5 text-xs tracking-normal text-background ring-1 ring-gray-800">
|
||||
Trial
|
||||
</span>
|
||||
) : null}
|
||||
</p>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Loader className="h-5 w-5 animate-spin" /> Loading teams...
|
||||
</div>
|
||||
) : (
|
||||
<TeamSwitcher
|
||||
currentTeam={currentTeam}
|
||||
teams={teams}
|
||||
setCurrentTeam={setCurrentTeam}
|
||||
/>
|
||||
)}
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<NavMain items={data.navMain} />
|
||||
{/* <NavProjects projects={data.projects} /> */}
|
||||
{/* <NavSecondary items={data.navSecondary} className="mt-auto" /> */}
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<SidebarMenu className="group-data-[collapsible=icon]:hidden">
|
||||
<SidebarMenuItem>
|
||||
<div>
|
||||
{/*
|
||||
* if user is free and showProBanner is true show pro banner
|
||||
*/}
|
||||
{userPlan === "free" && showProBanner ? (
|
||||
<ProBanner setShowProBanner={setShowProBanner} />
|
||||
) : null}
|
||||
|
||||
<div className="mb-2">
|
||||
{linksLimit ? (
|
||||
<UsageProgress
|
||||
title="Links"
|
||||
unit="links"
|
||||
usage={limits?.usage?.links}
|
||||
usageLimit={linksLimit}
|
||||
/>
|
||||
) : null}
|
||||
{documentsLimit ? (
|
||||
<UsageProgress
|
||||
title="Documents"
|
||||
unit="documents"
|
||||
usage={limits?.usage?.documents}
|
||||
usageLimit={documentsLimit}
|
||||
/>
|
||||
) : null}
|
||||
{linksLimit || documentsLimit ? (
|
||||
<p className="mt-2 px-2 text-xs text-muted-foreground">
|
||||
Change plan to increase usage limits
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
<NavUser />
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function UsageProgress(data: {
|
||||
title: string;
|
||||
unit: string;
|
||||
usage?: number;
|
||||
usageLimit?: number;
|
||||
}) {
|
||||
let { title, unit, usage, usageLimit } = data;
|
||||
let usagePercentage = 0;
|
||||
if (usage !== undefined && usageLimit !== undefined) {
|
||||
usagePercentage = (usage / usageLimit) * 100;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-2">
|
||||
<div className="mt-1 flex flex-col space-y-1">
|
||||
{usage !== undefined && usageLimit !== undefined ? (
|
||||
<p className="text-xs text-foreground">
|
||||
<span>{nFormatter(usage)}</span> / {nFormatter(usageLimit)} {unit}
|
||||
</p>
|
||||
) : (
|
||||
<div className="h-5 w-32 animate-pulse rounded-md bg-muted" />
|
||||
)}
|
||||
<Progress value={usagePercentage} className="h-1 bg-muted" max={100} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
components/sidebar/nav-main.tsx
Normal file
92
components/sidebar/nav-main.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
"use client";
|
||||
|
||||
import { ChevronRight, type LucideIcon } from "lucide-react";
|
||||
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "@/components/ui/sidebar";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function NavMain({
|
||||
items,
|
||||
}: {
|
||||
items: {
|
||||
title: string;
|
||||
url: string;
|
||||
icon: LucideIcon;
|
||||
current?: boolean;
|
||||
isActive?: boolean;
|
||||
items?: {
|
||||
title: string;
|
||||
url: string;
|
||||
current?: boolean;
|
||||
}[];
|
||||
}[];
|
||||
}) {
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<Collapsible key={item.title} asChild defaultOpen={item.isActive}>
|
||||
<SidebarMenuItem
|
||||
className={cn(
|
||||
item.current &&
|
||||
"rounded-md bg-gray-200 font-semibold dark:bg-secondary",
|
||||
)}
|
||||
>
|
||||
<SidebarMenuButton asChild tooltip={item.title}>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
{item.items?.length ? (
|
||||
<>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuAction className="data-[state=open]:rotate-90">
|
||||
<ChevronRight />
|
||||
<span className="sr-only">Toggle</span>
|
||||
</SidebarMenuAction>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.items?.map((subItem) => (
|
||||
<SidebarMenuSubItem
|
||||
key={subItem.title}
|
||||
className={cn(
|
||||
subItem.current &&
|
||||
"rounded-md bg-gray-200 font-semibold dark:bg-secondary",
|
||||
)}
|
||||
>
|
||||
<SidebarMenuSubButton asChild>
|
||||
<a href={subItem.url}>
|
||||
<span>{subItem.title}</span>
|
||||
</a>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
126
components/sidebar/nav-user.tsx
Normal file
126
components/sidebar/nav-user.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
BadgeCheck,
|
||||
Bell,
|
||||
ChevronsUpDown,
|
||||
CreditCard,
|
||||
LifeBuoyIcon,
|
||||
LogOut,
|
||||
MailIcon,
|
||||
Settings2,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar";
|
||||
|
||||
import { ModeToggle } from "../theme-toggle";
|
||||
|
||||
export function NavUser() {
|
||||
const { data: session, status } = useSession();
|
||||
const { isMobile } = useSidebar();
|
||||
|
||||
return (
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
>
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
<AvatarImage
|
||||
src={session?.user?.image || ""}
|
||||
alt={session?.user?.name || ""}
|
||||
/>
|
||||
<AvatarFallback className="rounded-lg">
|
||||
{session?.user?.name?.charAt(0) ||
|
||||
session?.user?.email?.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">
|
||||
{session?.user?.name || ""}
|
||||
</span>
|
||||
<span className="truncate text-xs">
|
||||
{session?.user?.email || ""}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronsUpDown className="ml-auto size-4" />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
||||
side={isMobile ? "bottom" : "right"}
|
||||
align="end"
|
||||
sideOffset={4}
|
||||
>
|
||||
<DropdownMenuLabel className="p-0 font-normal">
|
||||
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
<AvatarImage
|
||||
src={session?.user?.image || ""}
|
||||
alt={session?.user?.name || ""}
|
||||
/>
|
||||
<AvatarFallback className="rounded-lg">
|
||||
{session?.user?.name?.charAt(0) ||
|
||||
session?.user?.email?.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">
|
||||
{session?.user?.name || ""}
|
||||
</span>
|
||||
<span className="truncate text-xs">
|
||||
{session?.user?.email || ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<ModeToggle />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<Settings2 />
|
||||
User Settings
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<LifeBuoyIcon />
|
||||
Help Center
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<MailIcon />
|
||||
Contact Support
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<LogOut />
|
||||
Log out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
);
|
||||
}
|
||||
114
components/sidebar/team-switcher.tsx
Normal file
114
components/sidebar/team-switcher.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
|
||||
import { ChevronsUpDown, GalleryVerticalEndIcon, Plus } from "lucide-react";
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
useSidebar,
|
||||
} from "@/components/ui/sidebar";
|
||||
|
||||
import { Team } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { Avatar, AvatarFallback } from "../ui/avatar";
|
||||
|
||||
export function TeamSwitcher({
|
||||
currentTeam: activeTeam,
|
||||
teams,
|
||||
setCurrentTeam,
|
||||
}: {
|
||||
currentTeam: Team | null;
|
||||
teams: Team[];
|
||||
setCurrentTeam: (team: Team) => void;
|
||||
}) {
|
||||
const { isMobile } = useSidebar();
|
||||
|
||||
const switchTeam = (team: Team) => {
|
||||
localStorage.setItem("currentTeamId", team.id);
|
||||
setCurrentTeam(team);
|
||||
};
|
||||
|
||||
if (!activeTeam) return null;
|
||||
|
||||
const plan = activeTeam.plan?.split("+")[0];
|
||||
const isTrial = activeTeam.plan?.includes("trial");
|
||||
|
||||
return (
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground border"
|
||||
>
|
||||
<Avatar className="size-8 rounded-lg">
|
||||
<AvatarFallback className="rounded-lg">
|
||||
{activeTeam?.name?.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate">{activeTeam.name}</span>
|
||||
<span className="truncate text-xs font-semibold capitalize">
|
||||
{isTrial ? "Data Room Trial" : plan}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronsUpDown className="ml-auto" />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
||||
align="start"
|
||||
side={isMobile ? "bottom" : "right"}
|
||||
sideOffset={4}
|
||||
>
|
||||
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
||||
Teams
|
||||
</DropdownMenuLabel>
|
||||
{teams.map((team, index) => (
|
||||
<DropdownMenuItem
|
||||
key={index}
|
||||
onClick={() => switchTeam(team)}
|
||||
className={cn(
|
||||
"gap-2 p-2",
|
||||
team.id === activeTeam.id && "bg-muted font-medium",
|
||||
)}
|
||||
>
|
||||
{/* <div className="flex size-6 items-center justify-center rounded-sm border">
|
||||
<GalleryVerticalEndIcon className="size-4 shrink-0" />
|
||||
</div> */}
|
||||
<Avatar className="size-6 shrink-0 rounded text-[12px]">
|
||||
<AvatarFallback className="rounded">
|
||||
{team?.name?.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{team.name}
|
||||
{/* <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut> */}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
{/* <DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="gap-2 p-2">
|
||||
<div className="flex size-6 items-center justify-center rounded-md border bg-background">
|
||||
<Plus className="size-4" />
|
||||
</div>
|
||||
<div className="font-medium text-muted-foreground">Add team</div>
|
||||
</DropdownMenuItem> */}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
);
|
||||
}
|
||||
@@ -21,11 +21,11 @@ export function ModeToggle() {
|
||||
|
||||
return (
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger className="flex w-full items-center rounded-none !py-2 px-3 pr-2 text-sm duration-200 hover:!bg-gray-200 dark:hover:!bg-muted">
|
||||
<Palette className="mr-2 h-4 w-4" /> Themes
|
||||
<DropdownMenuSubTrigger>
|
||||
<Palette /> Change Theme
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent className="w-[180px]">
|
||||
<DropdownMenuSubContent className="w-fit">
|
||||
<DropdownMenuRadioGroup
|
||||
value={theme}
|
||||
onValueChange={setTheme}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
|
||||
import LoadingSpinner from "./loading-spinner";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 gap-2 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -31,7 +31,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
@@ -87,7 +87,7 @@ const DropdownMenuItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
|
||||
771
components/ui/sidebar.tsx
Normal file
771
components/ui/sidebar.tsx
Normal file
@@ -0,0 +1,771 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { VariantProps, cva } from "class-variance-authority";
|
||||
import { PanelLeft } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
import { useIsMobile } from "@/lib/hooks/use-mobile";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar:state";
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
||||
const SIDEBAR_WIDTH = "16rem";
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem";
|
||||
const SIDEBAR_WIDTH_ICON = "3rem";
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
|
||||
|
||||
type SidebarContext = {
|
||||
state: "expanded" | "collapsed";
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
openMobile: boolean;
|
||||
setOpenMobile: (open: boolean) => void;
|
||||
isMobile: boolean;
|
||||
toggleSidebar: () => void;
|
||||
};
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContext | null>(null);
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext);
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
const SidebarProvider = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
defaultOpen?: boolean;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const isMobile = useIsMobile();
|
||||
const [openMobile, setOpenMobile] = React.useState(false);
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen);
|
||||
const open = openProp ?? _open;
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value;
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState);
|
||||
} else {
|
||||
_setOpen(openState);
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
|
||||
},
|
||||
[setOpenProp, open],
|
||||
);
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile
|
||||
? setOpenMobile((open) => !open)
|
||||
: setOpen((open) => !open);
|
||||
}, [isMobile, setOpen, setOpenMobile]);
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault();
|
||||
toggleSidebar();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [toggleSidebar]);
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed";
|
||||
|
||||
const contextValue = React.useMemo<SidebarContext>(
|
||||
() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
],
|
||||
);
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</SidebarContext.Provider>
|
||||
);
|
||||
},
|
||||
);
|
||||
SidebarProvider.displayName = "SidebarProvider";
|
||||
|
||||
const Sidebar = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
side?: "left" | "right";
|
||||
variant?: "sidebar" | "floating" | "inset";
|
||||
collapsible?: "offcanvas" | "icon" | "none";
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
data-sidebar="sidebar"
|
||||
data-mobile="true"
|
||||
className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
side={side}
|
||||
>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="text-sidebar-foreground group peer hidden md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
>
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
|
||||
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||
side === "left"
|
||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
Sidebar.displayName = "Sidebar";
|
||||
|
||||
const SidebarTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof Button>,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, onClick, ...props }, ref) => {
|
||||
const { toggleSidebar } = useSidebar();
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
data-sidebar="trigger"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("h-7 w-7", className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event);
|
||||
toggleSidebar();
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<PanelLeft />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
);
|
||||
});
|
||||
SidebarTrigger.displayName = "SidebarTrigger";
|
||||
|
||||
const SidebarRail = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button">
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { toggleSidebar } = useSidebar();
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
data-sidebar="rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
|
||||
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarRail.displayName = "SidebarRail";
|
||||
|
||||
const SidebarInset = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"main">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex min-h-svh flex-1 flex-col bg-background",
|
||||
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow", // md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarInset.displayName = "SidebarInset";
|
||||
|
||||
const SidebarInput = React.forwardRef<
|
||||
React.ElementRef<typeof Input>,
|
||||
React.ComponentProps<typeof Input>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<Input
|
||||
ref={ref}
|
||||
data-sidebar="input"
|
||||
className={cn(
|
||||
"focus-visible:ring-sidebar-ring h-8 w-full bg-background shadow-none focus-visible:ring-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarInput.displayName = "SidebarInput";
|
||||
|
||||
const SidebarHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarHeader.displayName = "SidebarHeader";
|
||||
|
||||
const SidebarFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarFooter.displayName = "SidebarFooter";
|
||||
|
||||
const SidebarSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof Separator>,
|
||||
React.ComponentProps<typeof Separator>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<Separator
|
||||
ref={ref}
|
||||
data-sidebar="separator"
|
||||
className={cn("bg-sidebar-border mx-2 w-auto", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarSeparator.displayName = "SidebarSeparator";
|
||||
|
||||
const SidebarContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarContent.displayName = "SidebarContent";
|
||||
|
||||
const SidebarGroup = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarGroup.displayName = "SidebarGroup";
|
||||
|
||||
const SidebarGroupLabel = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & { asChild?: boolean }
|
||||
>(({ className, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "div";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarGroupLabel.displayName = "SidebarGroupLabel";
|
||||
|
||||
const SidebarGroupAction = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & { asChild?: boolean }
|
||||
>(({ className, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="group-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 after:md:hidden",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarGroupAction.displayName = "SidebarGroupAction";
|
||||
|
||||
const SidebarGroupContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarGroupContent.displayName = "SidebarGroupContent";
|
||||
|
||||
const SidebarMenu = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenu.displayName = "SidebarMenu";
|
||||
|
||||
const SidebarMenuItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li
|
||||
ref={ref}
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenuItem.displayName = "SidebarMenuItem";
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const SidebarMenuButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & {
|
||||
asChild?: boolean;
|
||||
isActive?: boolean;
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>
|
||||
>(
|
||||
(
|
||||
{
|
||||
asChild = false,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
const { isMobile, state } = useSidebar();
|
||||
|
||||
const button = (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
if (!tooltip) {
|
||||
return button;
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
);
|
||||
SidebarMenuButton.displayName = "SidebarMenuButton";
|
||||
|
||||
const SidebarMenuAction = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & {
|
||||
asChild?: boolean;
|
||||
showOnHover?: boolean;
|
||||
}
|
||||
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-action"
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 after:md:hidden",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
showOnHover &&
|
||||
"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarMenuAction.displayName = "SidebarMenuAction";
|
||||
|
||||
const SidebarMenuBadge = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
|
||||
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenuBadge.displayName = "SidebarMenuBadge";
|
||||
|
||||
const SidebarMenuSkeleton = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
showIcon?: boolean;
|
||||
}
|
||||
>(({ className, showIcon = false, ...props }, ref) => {
|
||||
// Random width between 50 to 90%.
|
||||
const width = React.useMemo(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}
|
||||
>
|
||||
{showIcon && (
|
||||
<Skeleton
|
||||
className="size-4 rounded-md"
|
||||
data-sidebar="menu-skeleton-icon"
|
||||
/>
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-[--skeleton-width] flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
|
||||
|
||||
const SidebarMenuSub = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
SidebarMenuSub.displayName = "SidebarMenuSub";
|
||||
|
||||
const SidebarMenuSubItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ ...props }, ref) => <li ref={ref} {...props} />);
|
||||
SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
|
||||
|
||||
const SidebarMenuSubButton = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.ComponentProps<"a"> & {
|
||||
asChild?: boolean;
|
||||
size?: "sm" | "md";
|
||||
isActive?: boolean;
|
||||
}
|
||||
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "a";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-sub-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||
size === "sm" && "text-xs",
|
||||
size === "md" && "text-sm",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
};
|
||||
19
lib/hooks/use-mobile.tsx
Normal file
19
lib/hooks/use-mobile.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
@@ -231,6 +231,8 @@ export type AnalyticsEvents =
|
||||
export interface Team {
|
||||
id: string;
|
||||
name?: string;
|
||||
logo?: React.ElementType;
|
||||
plan?: string;
|
||||
}
|
||||
|
||||
export interface TeamDetail {
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -27,7 +27,7 @@
|
||||
"@radix-ui/react-avatar": "^1.1.1",
|
||||
"@radix-ui/react-checkbox": "^1.1.2",
|
||||
"@radix-ui/react-collapsible": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||
"@radix-ui/react-label": "^2.1.0",
|
||||
"@radix-ui/react-popover": "^1.1.2",
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"@radix-ui/react-avatar": "^1.1.1",
|
||||
"@radix-ui/react-checkbox": "^1.1.2",
|
||||
"@radix-ui/react-collapsible": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.1",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||
"@radix-ui/react-label": "^2.1.0",
|
||||
"@radix-ui/react-popover": "^1.1.2",
|
||||
@@ -160,4 +160,4 @@
|
||||
"react-pdf": "8.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,9 @@ import { Head, Html, Main, NextScript } from "next/document";
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en" className="h-full bg-background" suppressHydrationWarning>
|
||||
<Html lang="en" className="bg-background" suppressHydrationWarning>
|
||||
<Head />
|
||||
<body className="h-full">
|
||||
<body className="">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
|
||||
@@ -32,6 +32,7 @@ export default async function handle(
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
plan: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -62,6 +63,7 @@ export default async function handle(
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
plan: true,
|
||||
},
|
||||
});
|
||||
teams.push(defaultTeam);
|
||||
|
||||
@@ -22,7 +22,12 @@ export default function DataroomPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<AppLayout
|
||||
breadcrumbs={[
|
||||
{ title: "All Datarooms", href: "/datarooms" },
|
||||
{ title: dataroom.name, href: `/datarooms/${dataroom.id}` },
|
||||
]}
|
||||
>
|
||||
<div className="relative mx-2 mb-10 mt-4 space-y-8 overflow-hidden px-1 sm:mx-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
|
||||
<header>
|
||||
<DataroomHeader
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function Documents() {
|
||||
const { documents, isValidating, isFiltered } = useDocuments();
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<AppLayout breadcrumbs={[{ title: "All Documents", href: "/documents" }]}>
|
||||
<div className="sticky top-0 z-50 bg-white p-4 pb-0 dark:bg-gray-900 sm:mx-4 sm:pt-8">
|
||||
<section className="mb-4 flex items-center justify-between space-x-2 sm:space-x-0">
|
||||
<div className="space-y-0 sm:space-y-1">
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function General() {
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<AppLayout breadcrumbs={[{ title: "Settings", href: "/settings/general" }]}>
|
||||
<main className="relative mx-2 mb-10 mt-4 space-y-8 overflow-hidden px-1 sm:mx-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
|
||||
<SettingsHeader />
|
||||
|
||||
|
||||
@@ -202,7 +202,12 @@ export default function Billing() {
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<AppLayout
|
||||
breadcrumbs={[
|
||||
{ title: "Settings", href: "/settings/general" },
|
||||
{ title: "People", href: "/settings/people" },
|
||||
]}
|
||||
>
|
||||
<main className="relative mx-2 mb-10 mt-4 space-y-8 overflow-hidden px-1 sm:mx-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
|
||||
<SettingsHeader />
|
||||
<div>
|
||||
@@ -217,7 +222,7 @@ export default function Billing() {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between rounded-lg border border-border bg-secondary p-4 sm:p-10 gap-x-1">
|
||||
<div className="flex items-center justify-between gap-x-1 rounded-lg border border-border bg-secondary p-4 sm:p-10">
|
||||
<div className="flex flex-col space-y-1 sm:space-y-3">
|
||||
<h2 className="text-xl font-medium">People</h2>
|
||||
<p className="text-sm text-secondary-foreground">
|
||||
@@ -237,7 +242,9 @@ export default function Billing() {
|
||||
clickedPlan={"Pro"}
|
||||
trigger={"invite_team_members"}
|
||||
>
|
||||
<Button className="text-xs sm:text-sm whitespace-nowrap px-1 sm:px-4">Upgrade to invite members</Button>
|
||||
<Button className="whitespace-nowrap px-1 text-xs sm:px-4 sm:text-sm">
|
||||
Upgrade to invite members
|
||||
</Button>
|
||||
</UpgradePlanModal>
|
||||
)}
|
||||
</div>
|
||||
@@ -261,7 +268,7 @@ export default function Billing() {
|
||||
)}
|
||||
{team?.users.map((member, index) => (
|
||||
<li
|
||||
className="flex items-center justify-between px-10 py-4 overflow-auto gap-12"
|
||||
className="flex items-center justify-between gap-12 overflow-auto px-10 py-4"
|
||||
key={index}
|
||||
>
|
||||
<div className="flex items-center gap-12">
|
||||
@@ -276,7 +283,7 @@ export default function Billing() {
|
||||
<div className="text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Folder />
|
||||
<span className="text-xs text-foreground text-nowrap">
|
||||
<span className="text-nowrap text-xs text-foreground">
|
||||
{getUserDocumentCount(member.userId)}{" "}
|
||||
{getUserDocumentCount(member.userId) === 1
|
||||
? "document"
|
||||
|
||||
@@ -37,6 +37,15 @@
|
||||
--ring: 217.9 10.6% 64.9%; /* gray-400 */
|
||||
|
||||
--radius: 0.5rem; /* md */
|
||||
|
||||
--sidebar-background: 0 0% 98%; /* white */
|
||||
--sidebar-foreground: 240 5.3% 26.1%; /* gray-900 */
|
||||
--sidebar-primary: 240 5.9% 10%; /* gray-950 */
|
||||
--sidebar-primary-foreground: 0 0% 98%; /* white */
|
||||
--sidebar-accent: 240 4.8% 95.9%; /* gray-100 */
|
||||
--sidebar-accent-foreground: 240 5.9% 10%; /* gray-950 */
|
||||
--sidebar-border: 220 13% 91%; /* gray-200 */
|
||||
--sidebar-ring: 217.2 91.2% 59.8%; /* gray-400 */
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -71,6 +80,15 @@
|
||||
--warning-foreground: 38 92% 95%; /* amber-50 */
|
||||
|
||||
--ring: 215 27.9% 16.9%; /* gray-800 */
|
||||
|
||||
--sidebar-background: 240 5.9% 10%; /* gray-950 */
|
||||
--sidebar-foreground: 240 4.8% 95.9%; /* gray-100 */
|
||||
--sidebar-primary: 224.3 76.3% 48%; /* blue-500 */
|
||||
--sidebar-primary-foreground: 0 0% 100%; /* white */
|
||||
--sidebar-accent: 240 3.7% 15.9%; /* gray-200 */
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%; /* gray-950 */
|
||||
--sidebar-border: 240 3.7% 15.9%; /* gray-200 */
|
||||
--sidebar-ring: 217.2 91.2% 59.8%; /* gray-400 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,211 +9,226 @@ module.exports = {
|
||||
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // TREMOR
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: "hsl(var(--warning))",
|
||||
foreground: "hsl(var(--warning-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
|
||||
//** START: TREMOR **//
|
||||
|
||||
// light mode
|
||||
tremor: {
|
||||
brand: {
|
||||
faint: "#eff6ff", // blue-50
|
||||
muted: "#bfdbfe", // blue-200
|
||||
subtle: "#60a5fa", // blue-400
|
||||
DEFAULT: "#3b82f6", // blue-500
|
||||
emphasis: "#1d4ed8", // blue-700
|
||||
inverted: "#ffffff", // white
|
||||
},
|
||||
background: {
|
||||
muted: "#f9fafb", // gray-50
|
||||
subtle: "#f3f4f6", // gray-100
|
||||
DEFAULT: "#ffffff", // white
|
||||
emphasis: "#374151", // gray-700
|
||||
},
|
||||
border: {
|
||||
DEFAULT: "#e5e7eb", // gray-200
|
||||
},
|
||||
ring: {
|
||||
DEFAULT: "#e5e7eb", // gray-200
|
||||
},
|
||||
content: {
|
||||
subtle: "#9ca3af", // gray-400
|
||||
DEFAULT: "#6b7280", // gray-500
|
||||
emphasis: "#374151", // gray-700
|
||||
strong: "#111827", // gray-900
|
||||
inverted: "#ffffff", // white
|
||||
},
|
||||
},
|
||||
// dark mode
|
||||
"dark-tremor": {
|
||||
brand: {
|
||||
faint: "#0B1229", // custom
|
||||
muted: "#172554", // blue-950
|
||||
subtle: "#1e40af", // blue-800
|
||||
DEFAULT: "#3b82f6", // blue-500
|
||||
emphasis: "#60a5fa", // blue-400
|
||||
inverted: "#030712", // gray-950
|
||||
},
|
||||
background: {
|
||||
muted: "#131A2B", // custom
|
||||
subtle: "#1f2937", // gray-800
|
||||
DEFAULT: "#111827", // gray-900
|
||||
emphasis: "#d1d5db", // gray-300
|
||||
},
|
||||
border: {
|
||||
DEFAULT: "#1f2937", // gray-800
|
||||
},
|
||||
ring: {
|
||||
DEFAULT: "#1f2937", // gray-800
|
||||
},
|
||||
content: {
|
||||
subtle: "#4b5563", // gray-600
|
||||
DEFAULT: "#6b7280", // gray-600
|
||||
emphasis: "#e5e7eb", // gray-200
|
||||
strong: "#f9fafb", // gray-50
|
||||
inverted: "#000000", // black
|
||||
},
|
||||
},
|
||||
//** END: TREMOR **//
|
||||
},
|
||||
boxShadow: {
|
||||
//** START: TREMOR boxShadow **//
|
||||
// light
|
||||
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||||
"tremor-card":
|
||||
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
||||
"tremor-dropdown":
|
||||
"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
||||
// dark
|
||||
"dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
||||
"dark-tremor-card":
|
||||
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
||||
"dark-tremor-dropdown":
|
||||
"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
||||
//** END: TREMOR boxShadow **//
|
||||
},
|
||||
borderRadius: {
|
||||
//** START: TREMOR borderRadius **//
|
||||
"tremor-small": "0.375rem",
|
||||
"tremor-default": "0.5rem",
|
||||
"tremor-full": "9999px",
|
||||
//** END: TREMOR borderRadius **//
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
fontSize: {
|
||||
//** START: TREMOR fontSize **//
|
||||
"tremor-label": ["0.75rem"],
|
||||
"tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
|
||||
"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
|
||||
"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
|
||||
//** END: TREMOR fontSize **//
|
||||
},
|
||||
keyframes: {
|
||||
// Modal
|
||||
"scale-in": {
|
||||
"0%": { transform: "scale(0.95)" },
|
||||
"100%": { transform: "scale(1)" },
|
||||
},
|
||||
"fade-in": {
|
||||
"0%": { opacity: "0" },
|
||||
"100%": { opacity: "1" },
|
||||
},
|
||||
// Others
|
||||
gauge_fadeIn: {
|
||||
from: { opacity: "0" },
|
||||
to: { opacity: "1" },
|
||||
},
|
||||
gauge_fill: {
|
||||
from: { "stroke-dashoffset": "332", opacity: "0" },
|
||||
to: { opacity: "1" },
|
||||
},
|
||||
flyEmoji: {
|
||||
"0%": {
|
||||
transform: "translateY(0) scale(1)",
|
||||
opacity: "0.7",
|
||||
},
|
||||
"100%": {
|
||||
transform: "translateY(-150px) scale(2)",
|
||||
opacity: "0",
|
||||
},
|
||||
},
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
// input-otp
|
||||
"caret-blink": {
|
||||
"0%,70%,100%": { opacity: "1" },
|
||||
"20%,50%": { opacity: "0" },
|
||||
},
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
16: "repeat(16, minmax(0, 1fr))",
|
||||
},
|
||||
animation: {
|
||||
// Modal
|
||||
"scale-in": "scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
|
||||
"fade-in": "fade-in 0.2s ease-out forwards",
|
||||
// Others
|
||||
gauge_fadeIn: "gauge_fadeIn 1s ease forwards",
|
||||
gauge_fill: "gauge_fill 1s ease forwards",
|
||||
flyEmoji: "flyEmoji 1s forwards",
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
// input-otp
|
||||
"caret-blink": "caret-blink 1.25s ease-out infinite",
|
||||
},
|
||||
},
|
||||
container: {
|
||||
center: 'true',
|
||||
padding: '2rem',
|
||||
screens: {
|
||||
'2xl': '1400px'
|
||||
}
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))'
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: 'hsl(var(--warning))',
|
||||
foreground: 'hsl(var(--warning-foreground))'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))'
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))'
|
||||
},
|
||||
tremor: {
|
||||
brand: {
|
||||
faint: '#eff6ff',
|
||||
muted: '#bfdbfe',
|
||||
subtle: '#60a5fa',
|
||||
DEFAULT: '#3b82f6',
|
||||
emphasis: '#1d4ed8',
|
||||
inverted: '#ffffff'
|
||||
},
|
||||
background: {
|
||||
muted: '#f9fafb',
|
||||
subtle: '#f3f4f6',
|
||||
DEFAULT: '#ffffff',
|
||||
emphasis: '#374151'
|
||||
},
|
||||
border: {
|
||||
DEFAULT: '#e5e7eb'
|
||||
},
|
||||
ring: {
|
||||
DEFAULT: '#e5e7eb'
|
||||
},
|
||||
content: {
|
||||
subtle: '#9ca3af',
|
||||
DEFAULT: '#6b7280',
|
||||
emphasis: '#374151',
|
||||
strong: '#111827',
|
||||
inverted: '#ffffff'
|
||||
}
|
||||
},
|
||||
'dark-tremor': {
|
||||
brand: {
|
||||
faint: '#0B1229',
|
||||
muted: '#172554',
|
||||
subtle: '#1e40af',
|
||||
DEFAULT: '#3b82f6',
|
||||
emphasis: '#60a5fa',
|
||||
inverted: '#030712'
|
||||
},
|
||||
background: {
|
||||
muted: '#131A2B',
|
||||
subtle: '#1f2937',
|
||||
DEFAULT: '#111827',
|
||||
emphasis: '#d1d5db'
|
||||
},
|
||||
border: {
|
||||
DEFAULT: '#1f2937'
|
||||
},
|
||||
ring: {
|
||||
DEFAULT: '#1f2937'
|
||||
},
|
||||
content: {
|
||||
subtle: '#4b5563',
|
||||
DEFAULT: '#6b7280',
|
||||
emphasis: '#e5e7eb',
|
||||
strong: '#f9fafb',
|
||||
inverted: '#000000'
|
||||
}
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
||||
foreground: 'hsl(var(--sidebar-foreground))',
|
||||
primary: 'hsl(var(--sidebar-primary))',
|
||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
||||
accent: 'hsl(var(--sidebar-accent))',
|
||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
||||
border: 'hsl(var(--sidebar-border))',
|
||||
ring: 'hsl(var(--sidebar-ring))'
|
||||
}
|
||||
},
|
||||
boxShadow: {
|
||||
'tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
'tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||
'tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||||
'dark-tremor-input': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
'dark-tremor-card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||
'dark-tremor-dropdown': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
|
||||
},
|
||||
borderRadius: {
|
||||
'tremor-small': '0.375rem',
|
||||
'tremor-default': '0.5rem',
|
||||
'tremor-full': '9999px',
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
},
|
||||
fontSize: {
|
||||
'tremor-label': ["0.75rem"],
|
||||
'tremor-default': ["0.875rem", { lineHeight: "1.25rem" }],
|
||||
'tremor-title': ["1.125rem", { lineHeight: "1.75rem" }],
|
||||
'tremor-metric': ["1.875rem", { lineHeight: "2.25rem" }]
|
||||
},
|
||||
keyframes: {
|
||||
'scale-in': {
|
||||
'0%': {
|
||||
transform: 'scale(0.95)'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)'
|
||||
}
|
||||
},
|
||||
'fade-in': {
|
||||
'0%': {
|
||||
opacity: '0'
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1'
|
||||
}
|
||||
},
|
||||
gauge_fadeIn: {
|
||||
from: {
|
||||
opacity: '0'
|
||||
},
|
||||
to: {
|
||||
opacity: '1'
|
||||
}
|
||||
},
|
||||
gauge_fill: {
|
||||
from: {
|
||||
'stroke-dashoffset': '332',
|
||||
opacity: '0'
|
||||
},
|
||||
to: {
|
||||
opacity: '1'
|
||||
}
|
||||
},
|
||||
flyEmoji: {
|
||||
'0%': {
|
||||
transform: 'translateY(0) scale(1)',
|
||||
opacity: '0.7'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translateY(-150px) scale(2)',
|
||||
opacity: '0'
|
||||
}
|
||||
},
|
||||
'accordion-down': {
|
||||
from: {
|
||||
height: '0'
|
||||
},
|
||||
to: {
|
||||
height: 'var(--radix-accordion-content-height)'
|
||||
}
|
||||
},
|
||||
'accordion-up': {
|
||||
from: {
|
||||
height: 'var(--radix-accordion-content-height)'
|
||||
},
|
||||
to: {
|
||||
height: '0'
|
||||
}
|
||||
},
|
||||
'caret-blink': {
|
||||
'0%,70%,100%': {
|
||||
opacity: '1'
|
||||
},
|
||||
'20%,50%': {
|
||||
opacity: '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
'16': 'repeat(16, minmax(0, 1fr))'
|
||||
},
|
||||
animation: {
|
||||
'scale-in': 'scale-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
'fade-in': 'fade-in 0.2s ease-out forwards',
|
||||
gauge_fadeIn: 'gauge_fadeIn 1s ease forwards',
|
||||
gauge_fill: 'gauge_fill 1s ease forwards',
|
||||
flyEmoji: 'flyEmoji 1s forwards',
|
||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||
'caret-blink': 'caret-blink 1.25s ease-out infinite'
|
||||
}
|
||||
}
|
||||
},
|
||||
//** START: TREMOR safelist **//
|
||||
safelist: [
|
||||
|
||||
Reference in New Issue
Block a user