konnosDashboard
OrganizationSelector.tsx180 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { Check, ChevronDown } from 'lucide-react'
3import { useMemo, useState, type ReactNode } from 'react'
4import { cn, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
5
6import {
7 CreateOrganizationCard,
8 OrganizationCard,
9} from '@/components/interfaces/Organization/OrganizationCard'
10import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
11import type { Organization } from '@/types'
12
13const VISIBLE_ORGANIZATIONS_LIMIT = 3
14const CONNECT_DISCLOSURE_TRIGGER_CLASSNAME =
15 'mx-auto flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 text-xs text-foreground-lighter transition-colors hover:bg-surface-200 hover:text-foreground'
16
17export const OrganizationSelector = ({
18 organizations,
19 selectedSlug,
20 disabled = false,
21 description,
22 createLabel,
23 createHrefParams,
24 onSelect,
25 getOrganizationDescription,
26}: {
27 organizations: Organization[]
28 selectedSlug?: string | null
29 disabled?: boolean
30 description?: ReactNode
31 createLabel?: string
32 createHrefParams?: { [key: string]: string }
33 onSelect: (slug: string) => void
34 getOrganizationDescription?: (organization: Organization) => ReactNode
35}) => {
36 const [showMore, setShowMore] = useState(false)
37 const [lastVisitedOrganization] = useLocalStorageQuery(
38 LOCAL_STORAGE_KEYS.LAST_VISITED_ORGANIZATION,
39 ''
40 )
41
42 const { visibleOrganizations, overflowOrganizations } = useMemo(() => {
43 const lastVisitedOrg = organizations.find(({ slug }) => slug === lastVisitedOrganization)
44 const selectedIndex = organizations.findIndex(({ slug }) => slug === selectedSlug)
45 const selectedInOverflow = selectedIndex >= VISIBLE_ORGANIZATIONS_LIMIT
46
47 if (!!lastVisitedOrg) {
48 const withoutLastVisited = organizations.filter(
49 ({ slug }) => slug !== lastVisitedOrganization
50 )
51 return {
52 visibleOrganizations: [
53 lastVisitedOrg,
54 ...withoutLastVisited.slice(0, VISIBLE_ORGANIZATIONS_LIMIT - 1),
55 ],
56 overflowOrganizations: withoutLastVisited.slice(VISIBLE_ORGANIZATIONS_LIMIT - 1),
57 }
58 }
59
60 if (!selectedInOverflow || !selectedSlug) {
61 return {
62 visibleOrganizations: organizations.slice(0, VISIBLE_ORGANIZATIONS_LIMIT),
63 overflowOrganizations: organizations.slice(VISIBLE_ORGANIZATIONS_LIMIT),
64 }
65 }
66
67 const selected = organizations[selectedIndex]
68 const withoutSelected = organizations.filter(({ slug }) => slug !== selectedSlug)
69
70 return {
71 visibleOrganizations: [
72 ...withoutSelected.slice(0, VISIBLE_ORGANIZATIONS_LIMIT - 1),
73 selected,
74 ],
75 overflowOrganizations: withoutSelected.slice(VISIBLE_ORGANIZATIONS_LIMIT - 1),
76 }
77 }, [lastVisitedOrganization, organizations, selectedSlug])
78
79 const hasOverflow = overflowOrganizations.length > 0
80
81 return (
82 <section className="space-y-2" aria-label="Organizations">
83 <div className="space-y-1">
84 <p className="text-xs font-medium uppercase tracking-wider text-foreground-light">
85 Organization
86 </p>
87 {description && <p className="text-xs text-foreground-lighter pr-4">{description}</p>}
88 </div>
89 <div className="space-y-2">
90 {visibleOrganizations.map((organization) => (
91 <ConnectOrganizationButton
92 key={organization.slug}
93 organization={organization}
94 selected={selectedSlug === organization.slug}
95 disabled={disabled}
96 onClick={() => onSelect(organization.slug)}
97 description={
98 getOrganizationDescription?.(organization) ?? getPlanDescription(organization)
99 }
100 />
101 ))}
102
103 {!!createLabel && !!createHrefParams && (
104 <CreateOrganizationCard params={createHrefParams} label={createLabel} />
105 )}
106
107 {hasOverflow && (
108 <Collapsible open={showMore} onOpenChange={setShowMore}>
109 <CollapsibleTrigger className={CONNECT_DISCLOSURE_TRIGGER_CLASSNAME}>
110 <span>{showMore ? 'Show fewer' : `Show ${overflowOrganizations.length} more`}</span>
111 <ChevronDown
112 className={cn('size-3.5 transition-transform', showMore && 'rotate-180')}
113 />
114 </CollapsibleTrigger>
115 <CollapsibleContent className="data-closed:animate-collapsible-up data-open:animate-collapsible-down overflow-hidden">
116 <div className="space-y-2 pt-1">
117 {overflowOrganizations.map((organization) => (
118 <ConnectOrganizationButton
119 key={organization.slug}
120 organization={organization}
121 selected={selectedSlug === organization.slug}
122 disabled={disabled}
123 onClick={() => onSelect(organization.slug)}
124 description={
125 getOrganizationDescription?.(organization) ?? getPlanDescription(organization)
126 }
127 />
128 ))}
129 </div>
130 </CollapsibleContent>
131 </Collapsible>
132 )}
133 </div>
134 </section>
135 )
136}
137
138const getPlanDescription = (organization: Organization) => `${organization.plan.name} Plan`
139
140const ConnectOrganizationButton = ({
141 organization,
142 selected,
143 disabled,
144 onClick,
145 description,
146}: {
147 organization: Organization
148 selected?: boolean
149 disabled?: boolean
150 onClick?: () => void
151 description?: ReactNode
152}) => (
153 <button
154 type="button"
155 disabled={disabled}
156 onClick={onClick}
157 aria-pressed={selected}
158 className={cn(
159 'group relative block w-full cursor-pointer text-left disabled:cursor-not-allowed disabled:opacity-50',
160 disabled && 'pointer-events-none'
161 )}
162 >
163 <OrganizationCard
164 isLink={false}
165 organization={organization}
166 description={description}
167 className={cn(
168 'pointer-events-none shadow-none transition-colors',
169 !disabled && !selected && 'group-hover:border-default group-hover:bg-surface-200',
170 selected &&
171 'border-brand bg-brand-200/20 dark:bg-brand-300 pr-10 group-hover:border-brand group-hover:bg-brand-200/20'
172 )}
173 />
174 {selected && (
175 <span className="pointer-events-none absolute right-3 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full bg-brand-500 dark:bg-brand-200 text-white dark:text-brand">
176 <Check className="size-3.5" strokeWidth={2} />
177 </span>
178 )}
179 </button>
180)