konnosDashboard
AddIntegrationDropdown.tsx76 lines · main
1import { ChevronDown } from 'lucide-react'
2import Image from 'next/image'
3import {
4 Button,
5 cn,
6 DropdownMenu,
7 DropdownMenuContent,
8 DropdownMenuItem,
9 DropdownMenuLabel,
10 DropdownMenuSeparator,
11 DropdownMenuTrigger,
12} from 'ui'
13
14import {
15 getIntegrationTypeIcon,
16 getIntegrationTypeLabel,
17 INTEGRATION_TYPES,
18} from './ThirdPartyAuthForm.utils'
19
20interface AddIntegrationDropdownProps {
21 buttonText?: string
22 align?: 'end' | 'center'
23 type?: 'primary' | 'default'
24 open?: boolean
25 onOpenChange?: (open: boolean) => void
26 onSelectIntegrationType: (type: INTEGRATION_TYPES) => void
27}
28
29const ProviderDropdownItem = ({
30 disabled,
31 type,
32 onSelectIntegrationType,
33}: {
34 disabled?: boolean
35 type: INTEGRATION_TYPES
36 onSelectIntegrationType: (type: INTEGRATION_TYPES) => void
37}) => {
38 return (
39 <DropdownMenuItem
40 key={type}
41 onClick={() => onSelectIntegrationType(type)}
42 className={cn('flex items-center gap-x-2 p-2', disabled && 'cursor-not-allowed')}
43 disabled={disabled}
44 >
45 <Image src={getIntegrationTypeIcon(type)} width={16} height={16} alt={`${type} icon`} />
46 <span>{getIntegrationTypeLabel(type)}</span>
47 </DropdownMenuItem>
48 )
49}
50
51export const AddIntegrationDropdown = ({
52 type = 'primary',
53 align = 'end',
54 open,
55 onOpenChange,
56 onSelectIntegrationType,
57}: AddIntegrationDropdownProps) => {
58 return (
59 <DropdownMenu open={open} onOpenChange={onOpenChange}>
60 <DropdownMenuTrigger asChild>
61 <Button type={type} iconRight={<ChevronDown />}>
62 Add provider
63 </Button>
64 </DropdownMenuTrigger>
65 <DropdownMenuContent align={align} className="w-56">
66 <DropdownMenuLabel>Select provider</DropdownMenuLabel>
67 <DropdownMenuSeparator />
68 <ProviderDropdownItem type="firebase" onSelectIntegrationType={onSelectIntegrationType} />
69 <ProviderDropdownItem type="clerk" onSelectIntegrationType={onSelectIntegrationType} />
70 <ProviderDropdownItem type="workos" onSelectIntegrationType={onSelectIntegrationType} />
71 <ProviderDropdownItem type="auth0" onSelectIntegrationType={onSelectIntegrationType} />
72 <ProviderDropdownItem type="awsCognito" onSelectIntegrationType={onSelectIntegrationType} />
73 </DropdownMenuContent>
74 </DropdownMenu>
75 )
76}