53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type ReactNode } from "react";
|
|
import { ImageIcon, Settings2Icon, UsersIcon, StickyNoteIcon, ActivityIcon } from "lucide-react";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
|
|
export type EventWorkspaceTab = {
|
|
id: string;
|
|
label: string;
|
|
content: ReactNode;
|
|
};
|
|
|
|
export function EventWorkspace({
|
|
heading,
|
|
tabs,
|
|
}: {
|
|
heading: ReactNode;
|
|
tabs: EventWorkspaceTab[];
|
|
}) {
|
|
const initial = tabs[0]?.id ?? "photos";
|
|
const [settingsVisited, setSettingsVisited] = useState(initial === "settings");
|
|
const icons = { photos: ImageIcon, settings: Settings2Icon, people: UsersIcon, notes: StickyNoteIcon, activity: ActivityIcon, audit: ActivityIcon };
|
|
|
|
return (
|
|
<div className="reveal flex flex-col gap-6 sm:gap-8">
|
|
{heading}
|
|
{tabs.length === 0 ? null : (
|
|
<Tabs defaultValue={initial} onValueChange={(value) => { if (value === "settings") setSettingsVisited(true); }} className="gap-5">
|
|
<TabsList variant="line" aria-label="Event sections" className="w-full max-w-full justify-start gap-2 overflow-x-auto p-0 shadow-[inset_0_-1px_0_var(--border)] group-data-horizontal/tabs:h-12">
|
|
{tabs.map((tab) => {
|
|
const Icon = icons[tab.id as keyof typeof icons];
|
|
return (
|
|
<TabsTrigger
|
|
key={tab.id}
|
|
value={tab.id}
|
|
className="h-full flex-none gap-2 rounded-none border-0 px-4 py-3 transition-colors data-[state=active]:text-primary after:bg-primary group-data-horizontal/tabs:after:bottom-0"
|
|
>
|
|
{Icon ? <Icon aria-hidden="true" /> : null}
|
|
{tab.label}
|
|
</TabsTrigger>
|
|
); })}
|
|
</TabsList>
|
|
{tabs.map((tab) => (
|
|
<TabsContent key={tab.id} value={tab.id} forceMount={tab.id === "settings" && settingsVisited ? true : undefined} className="flex flex-col gap-4 data-[state=inactive]:hidden">
|
|
{tab.content}
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|