konnosDashboard
OrgSelectorSheet.tsx68 lines · main
1import { Boxes } from 'lucide-react'
2import {
3 SheetHeader,
4 SheetTitle,
5 Tabs_Shadcn_,
6 TabsContent_Shadcn_,
7 TabsList_Shadcn_,
8 TabsTrigger_Shadcn_,
9} from 'ui'
10import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
11
12import { OrganizationDropdown } from '@/components/layouts/AppLayout/OrganizationDropdown'
13import type { Organization } from '@/types'
14
15const embeddedClassName =
16 'bg-transparent border-0 shadow-none min-h-0 flex-1 flex flex-col overflow-hidden rounded-none'
17
18export interface OrgSelectorSheetProps {
19 open: boolean
20 onOpenChange: (open: boolean) => void
21 onClose: () => void
22 selectedOrganization?: Organization | null
23 selectedOrganizationName?: string | null
24}
25
26export function OrgSelectorSheet({
27 open,
28 onOpenChange,
29 onClose,
30 selectedOrganization,
31 selectedOrganizationName,
32}: OrgSelectorSheetProps) {
33 const orgLabel = selectedOrganizationName ?? selectedOrganization?.name ?? 'Select organization'
34
35 return (
36 <MobileSheetNav
37 open={open}
38 onOpenChange={onOpenChange}
39 className="flex flex-col overflow-hidden h-[85dvh] md:max-h-[500px]"
40 >
41 <Tabs_Shadcn_
42 defaultValue="organization"
43 className="flex flex-col flex-1 min-h-0 overflow-hidden p-0"
44 >
45 <SheetHeader className="border-0 border-default p-0 shrink-0">
46 <SheetTitle className="sr-only">Switch organization</SheetTitle>
47 <TabsList_Shadcn_ className="w-full grid grid-cols-1 shrink-0">
48 <TabsTrigger_Shadcn_
49 value="organization"
50 className="text-xs flex flex-col items-center gap-1.5 px-4 py-3 data-[state=active]:border-0"
51 >
52 <Boxes className="shrink-0" size={16} strokeWidth={1.5} />
53 <span className="truncate max-w-full text-xs leading-tight" title={orgLabel}>
54 {orgLabel}
55 </span>
56 </TabsTrigger_Shadcn_>
57 </TabsList_Shadcn_>
58 </SheetHeader>
59 <TabsContent_Shadcn_
60 value="organization"
61 className="flex-1 min-h-0 overflow-hidden flex flex-col mt-0 p-0 data-[state=inactive]:hidden"
62 >
63 <OrganizationDropdown embedded className={embeddedClassName} onClose={onClose} />
64 </TabsContent_Shadcn_>
65 </Tabs_Shadcn_>
66 </MobileSheetNav>
67 )
68}