mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-01 08:34:53 +02:00
test new layout
This commit is contained in:
miloschwartz
parent
f14379a1c8
commit
1a750e8279
38 changed files with 992 additions and 1622 deletions
72
src/components/Breadcrumbs.tsx
Normal file
72
src/components/Breadcrumbs.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
interface BreadcrumbItem {
|
||||
label: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export function Breadcrumbs() {
|
||||
const pathname = usePathname();
|
||||
const segments = pathname.split("/").filter(Boolean);
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = segments.map((segment, index) => {
|
||||
const href = `/${segments.slice(0, index + 1).join("/")}`;
|
||||
let label = segment;
|
||||
|
||||
// Format labels
|
||||
if (segment === "settings") {
|
||||
label = "Settings";
|
||||
} else if (segment === "sites") {
|
||||
label = "Sites";
|
||||
} else if (segment === "resources") {
|
||||
label = "Resources";
|
||||
} else if (segment === "access") {
|
||||
label = "Users & Roles";
|
||||
} else if (segment === "general") {
|
||||
label = "General";
|
||||
} else if (segment === "share-links") {
|
||||
label = "Shareable Links";
|
||||
} else if (segment === "users") {
|
||||
label = "Users";
|
||||
} else if (segment === "roles") {
|
||||
label = "Roles";
|
||||
} else if (segment === "invitations") {
|
||||
label = "Invitations";
|
||||
} else if (segment === "connectivity") {
|
||||
label = "Connectivity";
|
||||
} else if (segment === "authentication") {
|
||||
label = "Authentication";
|
||||
}
|
||||
|
||||
return { label, href };
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="border-b px-4 py-2">
|
||||
<nav className="flex items-center space-x-1 text-sm text-muted-foreground">
|
||||
<Link href="/" className="hover:text-foreground">
|
||||
Home
|
||||
</Link>
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<div key={crumb.href} className="flex items-center">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<Link
|
||||
href={crumb.href}
|
||||
className={cn(
|
||||
"ml-1 hover:text-foreground",
|
||||
index === breadcrumbs.length - 1 && "text-foreground font-medium"
|
||||
)}
|
||||
>
|
||||
{crumb.label}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,160 +1,22 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator
|
||||
} from "@app/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger
|
||||
} from "@app/components/ui/popover";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { ListOrgsResponse } from "@server/routers/org";
|
||||
import { Check, ChevronsUpDown, Plus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useUserContext } from "@app/hooks/useUserContext";
|
||||
import ProfileIcon from "./ProfileIcon";
|
||||
import SupporterStatus from "./SupporterStatus";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
|
||||
type HeaderProps = {
|
||||
interface HeaderProps {
|
||||
orgId?: string;
|
||||
orgs?: ListOrgsResponse["orgs"];
|
||||
};
|
||||
orgs?: any;
|
||||
}
|
||||
|
||||
export function Header({ orgId, orgs }: HeaderProps) {
|
||||
const { user, updateUser } = useUserContext();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { env } = useEnvContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<ProfileIcon />
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="hidden md:block">
|
||||
<div className="flex items-center gap-4 mr-4">
|
||||
<Link
|
||||
href="https://docs.fossorial.io/Pangolin/overview"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
<a
|
||||
href="mailto:support@fossorial.io"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{orgs && (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral hover:bg-neutral"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="font-bold text-sm">
|
||||
Organization
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{orgId
|
||||
? orgs?.find(
|
||||
(org) =>
|
||||
org.orgId ===
|
||||
orgId
|
||||
)?.name
|
||||
: "None selected"}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="[100px] md:w-[180px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search..." />
|
||||
<CommandEmpty>
|
||||
No organizations found.
|
||||
</CommandEmpty>
|
||||
{(!env.flags.disableUserCreateOrg ||
|
||||
user.serverAdmin) && (
|
||||
<>
|
||||
<CommandGroup heading="Create">
|
||||
<CommandList>
|
||||
<CommandItem
|
||||
onSelect={(
|
||||
currentValue
|
||||
) => {
|
||||
router.push(
|
||||
"/setup"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Organization
|
||||
</CommandItem>
|
||||
</CommandList>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
</>
|
||||
)}
|
||||
<CommandGroup heading="Organizations">
|
||||
<CommandList>
|
||||
{orgs.map((org) => (
|
||||
<CommandItem
|
||||
key={org.orgId}
|
||||
onSelect={(
|
||||
currentValue
|
||||
) => {
|
||||
router.push(
|
||||
`/${org.orgId}/settings`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
orgId === org.orgId
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{org.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandList>
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<Link href="/" className="flex items-center space-x-2">
|
||||
<span className="font-bold">Pangolin</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
74
src/components/HorizontalTabs.tsx
Normal file
74
src/components/HorizontalTabs.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
|
||||
interface HorizontalTabsProps {
|
||||
children: React.ReactNode;
|
||||
items: Array<{
|
||||
title: string;
|
||||
href: string;
|
||||
icon?: React.ReactNode;
|
||||
}>;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function HorizontalTabs({
|
||||
children,
|
||||
items,
|
||||
disabled = false
|
||||
}: HorizontalTabsProps) {
|
||||
const pathname = usePathname();
|
||||
const params = useParams();
|
||||
|
||||
function hydrateHref(href: string) {
|
||||
return href.replace("{orgId}", params.orgId as string);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="relative">
|
||||
<div className="overflow-x-auto scrollbar-hide">
|
||||
<div className="flex space-x-4 border-b min-w-max">
|
||||
{items.map((item) => {
|
||||
const hydratedHref = hydrateHref(item.href);
|
||||
const isActive = pathname.startsWith(hydratedHref) && !pathname.includes("create");
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={hydratedHref}
|
||||
href={hydratedHref}
|
||||
className={cn(
|
||||
"px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
|
||||
isActive
|
||||
? "border-b-2 border-primary text-primary"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
disabled && "cursor-not-allowed"
|
||||
)}
|
||||
onClick={disabled ? (e) => e.preventDefault() : undefined}
|
||||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
{item.icon ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
) : (
|
||||
item.title
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
107
src/components/Layout.tsx
Normal file
107
src/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Header } from "@app/components/Header";
|
||||
import { SidebarNav } from "@app/components/SidebarNav";
|
||||
import { TopBar } from "@app/components/TopBar";
|
||||
import { OrgSelector } from "@app/components/OrgSelector";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { ListOrgsResponse } from "@server/routers/org";
|
||||
import SupporterStatus from "@app/components/SupporterStatus";
|
||||
import { Separator } from "@app/components/ui/separator";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from "@app/components/ui/sheet";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { Breadcrumbs } from "@app/components/Breadcrumbs";
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
orgId?: string;
|
||||
orgs?: ListOrgsResponse["orgs"];
|
||||
navItems: Array<{
|
||||
title: string;
|
||||
href: string;
|
||||
icon?: React.ReactNode;
|
||||
children?: Array<{
|
||||
title: string;
|
||||
href: string;
|
||||
icon?: React.ReactNode;
|
||||
}>;
|
||||
}>;
|
||||
}
|
||||
|
||||
export function Layout({ children, orgId, orgs, navItems }: LayoutProps) {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const { env } = useEnvContext();
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="md:hidden fixed top-4 left-4 z-50">
|
||||
<Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Menu className="h-6 w-6" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="w-64 p-0">
|
||||
<SheetTitle className="sr-only">Navigation Menu</SheetTitle>
|
||||
<SheetDescription className="sr-only">
|
||||
Main navigation menu for the application
|
||||
</SheetDescription>
|
||||
<div className="flex h-16 items-center border-b px-4">
|
||||
<Header orgId={orgId} orgs={orgs} />
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<SidebarNav items={navItems} />
|
||||
</div>
|
||||
<div className="p-4 space-y-4 border-t">
|
||||
<SupporterStatus />
|
||||
<OrgSelector orgId={orgId} orgs={orgs} />
|
||||
{env?.app?.version && (
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
v{env.app.version}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
|
||||
{/* Desktop Sidebar */}
|
||||
<div className="hidden md:flex w-64 border-r bg-card flex-col h-full shrink-0">
|
||||
<div className="flex h-16 items-center border-b px-4 shrink-0">
|
||||
<Header orgId={orgId} orgs={orgs} />
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<SidebarNav items={navItems} />
|
||||
</div>
|
||||
<div className="p-4 space-y-4 border-t shrink-0">
|
||||
<SupporterStatus />
|
||||
<OrgSelector orgId={orgId} orgs={orgs} />
|
||||
{env?.app?.version && (
|
||||
<div className="text-xs text-muted-foreground text-center">
|
||||
v{env.app.version}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col h-full min-w-0">
|
||||
<div className="h-16 border-b shrink-0">
|
||||
<div className="flex h-full items-center justify-end px-4">
|
||||
<TopBar orgId={orgId} orgs={orgs} />
|
||||
</div>
|
||||
</div>
|
||||
<Breadcrumbs />
|
||||
<main className="flex-1 overflow-y-auto p-4 w-full">
|
||||
<div className="container mx-auto max-w-12xl">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
124
src/components/OrgSelector.tsx
Normal file
124
src/components/OrgSelector.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator
|
||||
} from "@app/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger
|
||||
} from "@app/components/ui/popover";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { ListOrgsResponse } from "@server/routers/org";
|
||||
import { Check, ChevronsUpDown, Plus } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useUserContext } from "@app/hooks/useUserContext";
|
||||
|
||||
interface OrgSelectorProps {
|
||||
orgId?: string;
|
||||
orgs?: ListOrgsResponse["orgs"];
|
||||
}
|
||||
|
||||
export function OrgSelector({ orgId, orgs }: OrgSelectorProps) {
|
||||
const { user } = useUserContext();
|
||||
const [open, setOpen] = useState(false);
|
||||
const router = useRouter();
|
||||
const { env } = useEnvContext();
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-full h-12 px-3 py-4 bg-neutral hover:bg-neutral"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="font-bold text-sm">
|
||||
Organization
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{orgId
|
||||
? orgs?.find(
|
||||
(org) =>
|
||||
org.orgId ===
|
||||
orgId
|
||||
)?.name
|
||||
: "None selected"}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[180px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search..." />
|
||||
<CommandEmpty>
|
||||
No organizations found.
|
||||
</CommandEmpty>
|
||||
{(!env.flags.disableUserCreateOrg ||
|
||||
user.serverAdmin) && (
|
||||
<>
|
||||
<CommandGroup heading="Create">
|
||||
<CommandList>
|
||||
<CommandItem
|
||||
onSelect={(
|
||||
currentValue
|
||||
) => {
|
||||
router.push(
|
||||
"/setup"
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Organization
|
||||
</CommandItem>
|
||||
</CommandList>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
</>
|
||||
)}
|
||||
<CommandGroup heading="Organizations">
|
||||
<CommandList>
|
||||
{orgs?.map((org) => (
|
||||
<CommandItem
|
||||
key={org.orgId}
|
||||
onSelect={(
|
||||
currentValue
|
||||
) => {
|
||||
router.push(
|
||||
`/${org.orgId}/settings`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
orgId === org.orgId
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{org.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandList>
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
|
@ -66,7 +66,10 @@ export default function ProfileIcon() {
|
|||
<Enable2FaForm open={openEnable2fa} setOpen={setOpenEnable2fa} />
|
||||
<Disable2FaForm open={openDisable2fa} setOpen={setOpenDisable2fa} />
|
||||
|
||||
<div className="flex items-center md:gap-4 gap-2 grow min-w-0">
|
||||
<div className="flex items-center md:gap-4 grow min-w-0">
|
||||
<span className="truncate max-w-full font-medium min-w-0">
|
||||
{user.email}
|
||||
</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
|
|
@ -150,12 +153,6 @@ export default function ProfileIcon() {
|
|||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<span className="truncate max-w-full font-medium min-w-0 mr-1">
|
||||
{user.email}
|
||||
</span>
|
||||
<div className="hidden md:block">
|
||||
<SupporterStatus />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { useParams, usePathname } from "next/navigation";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import { CornerDownRight } from "lucide-react";
|
||||
|
||||
interface SidebarNavItem {
|
||||
|
|
@ -39,43 +31,6 @@ export function SidebarNav({
|
|||
const resourceId = params.resourceId as string;
|
||||
const userId = params.userId as string;
|
||||
|
||||
const [selectedValue, setSelectedValue] =
|
||||
React.useState<string>(getSelectedValue());
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedValue(getSelectedValue());
|
||||
}, [usePathname()]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const handleSelectChange = (value: string) => {
|
||||
if (!disabled) {
|
||||
router.push(value);
|
||||
}
|
||||
};
|
||||
|
||||
function getSelectedValue() {
|
||||
let foundHref = "";
|
||||
for (const item of items) {
|
||||
const hydratedHref = hydrateHref(item.href);
|
||||
if (hydratedHref === pathname) {
|
||||
foundHref = hydratedHref;
|
||||
break;
|
||||
}
|
||||
if (item.children) {
|
||||
for (const child of item.children) {
|
||||
const hydratedChildHref = hydrateHref(child.href);
|
||||
if (hydratedChildHref === pathname) {
|
||||
foundHref = hydratedChildHref;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (foundHref) break;
|
||||
}
|
||||
return foundHref;
|
||||
}
|
||||
|
||||
function hydrateHref(val: string): string {
|
||||
return val
|
||||
.replace("{orgId}", orgId)
|
||||
|
|
@ -85,142 +40,72 @@ export function SidebarNav({
|
|||
}
|
||||
|
||||
function renderItems(items: SidebarNavItem[]) {
|
||||
return items.map((item) => (
|
||||
<div key={hydrateHref(item.href)}>
|
||||
<Link
|
||||
href={hydrateHref(item.href)}
|
||||
className={cn(
|
||||
"w-full",
|
||||
buttonVariants({ variant: "ghost" }),
|
||||
pathname === hydrateHref(item.href) &&
|
||||
!pathname.includes("create")
|
||||
? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border"
|
||||
: "hover:bg-transparent hover:underline",
|
||||
"justify-start",
|
||||
disabled && "cursor-not-allowed"
|
||||
)}
|
||||
onClick={disabled ? (e) => e.preventDefault() : undefined}
|
||||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
{item.icon ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
return items.map((item) => {
|
||||
const hydratedHref = hydrateHref(item.href);
|
||||
const isActive = pathname.startsWith(hydratedHref) && !pathname.includes("create");
|
||||
|
||||
return (
|
||||
<div key={hydratedHref}>
|
||||
<Link
|
||||
href={hydratedHref}
|
||||
className={cn(
|
||||
"flex items-center py-2 px-3 w-full transition-colors",
|
||||
isActive
|
||||
? "text-primary font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
disabled && "cursor-not-allowed opacity-60"
|
||||
)}
|
||||
onClick={disabled ? (e) => e.preventDefault() : undefined}
|
||||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
{item.icon && <span className="mr-2">{item.icon}</span>}
|
||||
{item.title}
|
||||
</Link>
|
||||
{item.children && (
|
||||
<div className="ml-4 space-y-1 mt-1">
|
||||
{item.children.map((child) => {
|
||||
const hydratedChildHref = hydrateHref(child.href);
|
||||
const isChildActive = pathname.startsWith(hydratedChildHref) && !pathname.includes("create");
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={hydratedChildHref}
|
||||
href={hydratedChildHref}
|
||||
className={cn(
|
||||
"flex items-center text-sm py-2 px-3 w-full transition-colors",
|
||||
isChildActive
|
||||
? "text-primary font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
disabled && "cursor-not-allowed opacity-60"
|
||||
)}
|
||||
onClick={disabled ? (e) => e.preventDefault() : undefined}
|
||||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
<CornerDownRight className="h-4 w-4 text-muted-foreground/70 mr-2" />
|
||||
{child.icon && <span className="mr-2">{child.icon}</span>}
|
||||
{child.title}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
item.title
|
||||
)}
|
||||
</Link>
|
||||
{item.children && (
|
||||
<div className="ml-4 space-y-2">
|
||||
{item.children.map((child) => (
|
||||
<div
|
||||
key={hydrateHref(child.href)}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Link
|
||||
href={hydrateHref(child.href)}
|
||||
className={cn(
|
||||
"w-full",
|
||||
buttonVariants({ variant: "ghost" }),
|
||||
pathname === hydrateHref(child.href) &&
|
||||
!pathname.includes("create")
|
||||
? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border"
|
||||
: "hover:bg-transparent hover:underline",
|
||||
"justify-start",
|
||||
disabled && "cursor-not-allowed"
|
||||
)}
|
||||
onClick={
|
||||
disabled
|
||||
? (e) => e.preventDefault()
|
||||
: undefined
|
||||
}
|
||||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
<CornerDownRight className="h-4 w-4 text-gray-500 mr-2" />
|
||||
{child.icon ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{child.icon}
|
||||
<span>{child.title}</span>
|
||||
</div>
|
||||
) : (
|
||||
child.title
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
));
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="block lg:hidden">
|
||||
<Select
|
||||
defaultValue={selectedValue}
|
||||
value={selectedValue}
|
||||
onValueChange={handleSelectChange}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{items.flatMap((item) => {
|
||||
const topLevelItem = (
|
||||
<SelectItem
|
||||
key={hydrateHref(item.href)}
|
||||
value={hydrateHref(item.href)}
|
||||
>
|
||||
{item.icon ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
) : (
|
||||
item.title
|
||||
)}
|
||||
</SelectItem>
|
||||
);
|
||||
const childItems =
|
||||
item.children?.map((child) => (
|
||||
<SelectItem
|
||||
key={hydrateHref(child.href)}
|
||||
value={hydrateHref(child.href)}
|
||||
className="pl-8"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CornerDownRight className="h-4 w-4 text-gray-500" />
|
||||
{child.icon ? (
|
||||
<>
|
||||
{child.icon}
|
||||
<span>{child.title}</span>
|
||||
</>
|
||||
) : (
|
||||
<span>{child.title}</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
)) || [];
|
||||
return [topLevelItem, ...childItems];
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<nav
|
||||
className={cn(
|
||||
"hidden lg:flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-3 pr-8",
|
||||
disabled && "opacity-50 pointer-events-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{renderItems(items)}
|
||||
</nav>
|
||||
</div>
|
||||
<nav
|
||||
className={cn(
|
||||
"flex flex-col space-y-1",
|
||||
disabled && "pointer-events-none opacity-60",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{renderItems(items)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -419,7 +419,7 @@ export default function SupporterStatus() {
|
|||
<Button
|
||||
variant="outlinePrimary"
|
||||
size="sm"
|
||||
className="gap-2"
|
||||
className="gap-2 w-full"
|
||||
onClick={() => {
|
||||
setPurchaseOptionsOpen(true);
|
||||
}}
|
||||
|
|
|
|||
37
src/components/TopBar.tsx
Normal file
37
src/components/TopBar.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
"use client";
|
||||
|
||||
import ProfileIcon from "@app/components/ProfileIcon";
|
||||
import Link from "next/link";
|
||||
|
||||
interface TopBarProps {
|
||||
orgId?: string;
|
||||
orgs?: any;
|
||||
}
|
||||
|
||||
export function TopBar({ orgId, orgs }: TopBarProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between w-full h-full">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="https://docs.fossorial.io"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
<Link
|
||||
href="https://fossorial.io/support"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Support
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<ProfileIcon />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
148
src/components/ui/data-table.tsx
Normal file
148
src/components/ui/data-table.tsx
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
getPaginationRowModel,
|
||||
SortingState,
|
||||
getSortedRowModel,
|
||||
ColumnFiltersState,
|
||||
getFilteredRowModel
|
||||
} from "@tanstack/react-table";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { useState } from "react";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { DataTablePagination } from "@app/components/DataTablePagination";
|
||||
import { Plus, Search } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@app/components/ui/card";
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[];
|
||||
data: TData[];
|
||||
title?: string;
|
||||
addButtonText?: string;
|
||||
onAdd?: () => void;
|
||||
searchPlaceholder?: string;
|
||||
searchColumn?: string;
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({
|
||||
columns,
|
||||
data,
|
||||
title,
|
||||
addButtonText,
|
||||
onAdd,
|
||||
searchPlaceholder = "Search...",
|
||||
searchColumn = "name"
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const [sorting, setSorting] = useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
onSortingChange: setSorting,
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 20,
|
||||
pageIndex: 0
|
||||
}
|
||||
},
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-12xl">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<div className="flex items-center max-w-sm w-full relative">
|
||||
<Input
|
||||
placeholder={searchPlaceholder}
|
||||
value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
|
||||
onChange={(event) =>
|
||||
table.getColumn(searchColumn)?.setFilterValue(event.target.value)
|
||||
}
|
||||
className="w-full pl-8"
|
||||
/>
|
||||
<Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
|
||||
</div>
|
||||
{onAdd && addButtonText && (
|
||||
<Button onClick={onAdd}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="h-24 text-center"
|
||||
>
|
||||
No results found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="mt-4">
|
||||
<DataTablePagination table={table} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -23,30 +23,24 @@ const Table = (
|
|||
</div>)
|
||||
Table.displayName = "Table"
|
||||
|
||||
const TableHeader = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableSectionElement> & {
|
||||
ref: React.RefObject<HTMLTableSectionElement>;
|
||||
}
|
||||
) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
))
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
const TableBody = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableSectionElement> & {
|
||||
ref: React.RefObject<HTMLTableSectionElement>;
|
||||
}
|
||||
) => (<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>)
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
const TableFooter = (
|
||||
|
|
@ -67,55 +61,49 @@ const TableFooter = (
|
|||
/>)
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
const TableRow = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableRowElement> & {
|
||||
ref: React.RefObject<HTMLTableRowElement>;
|
||||
}
|
||||
) => (<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>)
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
const TableHead = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ThHTMLAttributes<HTMLTableCellElement> & {
|
||||
ref: React.RefObject<HTMLTableCellElement>;
|
||||
}
|
||||
) => (<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>)
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-8 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
const TableCell = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.TdHTMLAttributes<HTMLTableCellElement> & {
|
||||
ref: React.RefObject<HTMLTableCellElement>;
|
||||
}
|
||||
) => (<td
|
||||
ref={ref}
|
||||
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
{...props}
|
||||
/>)
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
const TableCaption = (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue