mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 10:29:14 +08:00
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { ChevronDown } 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={<ChevronDown />}>
|
|
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>
|
|
)
|
|
}
|