konnosDashboard
OrganizationDropdownCommandContent.tsx134 lines · main
1import { Plus } from 'lucide-react'
2import Link from 'next/link'
3import {
4 Button,
5 cn,
6 Command,
7 CommandEmpty,
8 CommandGroup,
9 CommandInput,
10 CommandItem,
11 CommandList,
12 CommandSeparator,
13 ScrollArea,
14} from 'ui'
15
16import { OrgCommandItem } from './OrgCommandItem'
17import type { Organization } from '@/types'
18
19export interface OrganizationDropdownCommandContentProps {
20 embedded: boolean
21 className?: string
22 organizations: Organization[]
23 selectedSlug: string | undefined
24 routePathname: string
25 hasRouteSlug: boolean
26 organizationCreationEnabled: boolean
27 onClose: () => void
28}
29
30export function OrganizationDropdownCommandContent({
31 embedded,
32 className,
33 organizations,
34 selectedSlug,
35 routePathname,
36 hasRouteSlug,
37 organizationCreationEnabled,
38 onClose,
39}: OrganizationDropdownCommandContentProps) {
40 const orgList = (
41 <>
42 {organizations?.map((org) => (
43 <OrgCommandItem
44 key={org.slug}
45 org={org}
46 selectedSlug={selectedSlug}
47 routePathname={routePathname}
48 hasRouteSlug={hasRouteSlug}
49 onClose={onClose}
50 compactPadding={!embedded}
51 />
52 ))}
53 </>
54 )
55
56 if (embedded) {
57 return (
58 <Command className={cn(className, 'flex flex-col flex-1 min-h-0 overflow-hidden')}>
59 <div className="flex items-center gap-2 shrink-0 border-b p-2">
60 <Button type="text" block size="small" asChild>
61 <Link
62 href="/organizations"
63 className="text-xs text-foreground-light hover:text-foreground"
64 onClick={onClose}
65 >
66 All Organizations
67 </Link>
68 </Button>
69 {organizationCreationEnabled && (
70 <Button
71 type="default"
72 block
73 size="small"
74 asChild
75 icon={<Plus size={14} strokeWidth={1.5} />}
76 >
77 <Link
78 href="/new"
79 className="text-xs text-foreground-light hover:text-foreground"
80 onClick={onClose}
81 >
82 New organization
83 </Link>
84 </Button>
85 )}
86 </div>
87 <CommandInput
88 placeholder="Find organization..."
89 wrapperClassName="shrink-0"
90 className="text-base sm:text-sm"
91 />
92 <CommandList className="flex flex-col flex-1 min-h-0 overflow-y-auto p-1 max-h-none!">
93 <CommandEmpty>No organizations found</CommandEmpty>
94 <CommandGroup className="min-h-0">{orgList}</CommandGroup>
95 </CommandList>
96 </Command>
97 )
98 }
99
100 return (
101 <Command className={className}>
102 <CommandInput placeholder="Find organization..." />
103 <CommandList>
104 <CommandEmpty>No organizations found</CommandEmpty>
105 <CommandGroup>
106 <ScrollArea className={(organizations || []).length > 7 ? 'md:h-[210px]' : ''}>
107 {orgList}
108 </ScrollArea>
109 </CommandGroup>
110 <CommandSeparator />
111 <CommandGroup>
112 <CommandItem className="cursor-pointer w-full" onSelect={() => onClose()}>
113 <Link href="/organizations" className="flex items-center gap-2 w-full">
114 All Organizations
115 </Link>
116 </CommandItem>
117 </CommandGroup>
118 {organizationCreationEnabled && (
119 <>
120 <CommandSeparator />
121 <CommandGroup>
122 <CommandItem className="cursor-pointer w-full" onSelect={() => onClose()}>
123 <Link href="/new" className="flex items-center gap-2 w-full">
124 <Plus size={14} strokeWidth={1.5} />
125 <p>New organization</p>
126 </Link>
127 </CommandItem>
128 </CommandGroup>
129 </>
130 )}
131 </CommandList>
132 </Command>
133 )
134}