konnosDashboard
OrgCommandItem.tsx49 lines · main
1import { Check } from 'lucide-react'
2import Link from 'next/link'
3import { cn, CommandItem } from 'ui'
4
5import PartnerIcon from '@/components/ui/PartnerIcon'
6import type { Organization } from '@/types'
7
8export interface OrgCommandItemProps {
9 org: Organization
10 selectedSlug: string | undefined
11 routePathname: string
12 hasRouteSlug: boolean
13 onClose: () => void
14 compactPadding?: boolean
15}
16
17export function OrgCommandItem({
18 org,
19 selectedSlug,
20 routePathname,
21 hasRouteSlug,
22 onClose,
23 compactPadding = false,
24}: OrgCommandItemProps) {
25 const href = hasRouteSlug ? routePathname.replace('[slug]', org.slug) : `/org/${org.slug}`
26
27 return (
28 <CommandItem
29 key={org.slug}
30 value={`${org.name.replaceAll('"', '')} - ${org.slug}`}
31 className="cursor-pointer w-full"
32 onSelect={() => onClose()}
33 >
34 <Link
35 href={href}
36 className={cn(
37 'w-full flex items-center justify-between text-sm md:text-xs',
38 !compactPadding && 'p-0.5'
39 )}
40 >
41 <div className="flex items-center gap-2">
42 <span>{org.name}</span>
43 <PartnerIcon organization={org} />
44 </div>
45 {org.slug === selectedSlug && <Check size={16} />}
46 </Link>
47 </CommandItem>
48 )
49}