mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { ChevronDownIcon } from 'lucide-react'
|
|
import Image from 'next/image'
|
|
import {
|
|
Button,
|
|
cn,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from 'ui'
|
|
|
|
import {
|
|
getIntegrationTypeIcon,
|
|
getIntegrationTypeLabel,
|
|
INTEGRATION_TYPES,
|
|
} from './ThirdPartyAuthForm.utils'
|
|
|
|
interface AddIntegrationDropdownProps {
|
|
buttonText?: string
|
|
align?: 'end' | 'center'
|
|
variant?: 'primary' | 'default'
|
|
open?: boolean
|
|
onOpenChange?: (open: boolean) => void
|
|
onSelectIntegrationType: (type: INTEGRATION_TYPES) => void
|
|
}
|
|
|
|
const ProviderDropdownItem = ({
|
|
disabled,
|
|
type,
|
|
onSelectIntegrationType,
|
|
}: {
|
|
disabled?: boolean
|
|
type: INTEGRATION_TYPES
|
|
onSelectIntegrationType: (type: INTEGRATION_TYPES) => void
|
|
}) => {
|
|
return (
|
|
<DropdownMenuItem
|
|
key={type}
|
|
onClick={() => onSelectIntegrationType(type)}
|
|
className={cn('flex items-center gap-x-2 p-2', disabled && 'cursor-not-allowed')}
|
|
disabled={disabled}
|
|
>
|
|
<Image src={getIntegrationTypeIcon(type)} width={16} height={16} alt={`${type} icon`} />
|
|
<span>{getIntegrationTypeLabel(type)}</span>
|
|
</DropdownMenuItem>
|
|
)
|
|
}
|
|
|
|
export const AddIntegrationDropdown = ({
|
|
variant = 'primary',
|
|
align = 'end',
|
|
open,
|
|
onOpenChange,
|
|
onSelectIntegrationType,
|
|
}: AddIntegrationDropdownProps) => {
|
|
return (
|
|
<DropdownMenu open={open} onOpenChange={onOpenChange}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant={variant} iconRight={<ChevronDownIcon />}>
|
|
Add provider
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align={align} className="w-56">
|
|
<DropdownMenuLabel>Select provider</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<ProviderDropdownItem type="firebase" onSelectIntegrationType={onSelectIntegrationType} />
|
|
<ProviderDropdownItem type="clerk" onSelectIntegrationType={onSelectIntegrationType} />
|
|
<ProviderDropdownItem type="workos" onSelectIntegrationType={onSelectIntegrationType} />
|
|
<ProviderDropdownItem type="auth0" onSelectIntegrationType={onSelectIntegrationType} />
|
|
<ProviderDropdownItem type="awsCognito" onSelectIntegrationType={onSelectIntegrationType} />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|