mirror of
https://github.com/supabase/supabase.git
synced 2026-05-11 19:26:38 +08:00
56de26fe22
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com>
94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
import { Box, Check, ChevronDown } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import {
|
|
Button,
|
|
cn,
|
|
Command_Shadcn_,
|
|
CommandEmpty_Shadcn_,
|
|
CommandGroup_Shadcn_,
|
|
CommandInput_Shadcn_,
|
|
CommandItem_Shadcn_,
|
|
CommandList_Shadcn_,
|
|
Popover_Shadcn_,
|
|
PopoverContent_Shadcn_,
|
|
PopoverTrigger_Shadcn_,
|
|
} from 'ui'
|
|
|
|
import { ConnectionType } from '@/components/interfaces/ConnectSheet/Connect.constants'
|
|
import { ConnectionIcon } from '@/components/interfaces/ConnectSheet/ConnectionIcon'
|
|
|
|
interface FrameworkSelectorProps {
|
|
value: string
|
|
onChange: (value: string) => void
|
|
items: ConnectionType[]
|
|
className?: string
|
|
size?: 'tiny' | 'small'
|
|
}
|
|
|
|
export const FrameworkSelector = ({
|
|
value,
|
|
onChange,
|
|
items,
|
|
className,
|
|
size = 'tiny',
|
|
}: FrameworkSelectorProps) => {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
const selectedItem = items.find((item) => item.key === value)
|
|
|
|
function handleSelect(key: string) {
|
|
onChange(key)
|
|
setOpen(false)
|
|
}
|
|
|
|
return (
|
|
<Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
|
|
<div className={cn('flex', className)}>
|
|
<PopoverTrigger_Shadcn_ asChild>
|
|
<Button
|
|
size={size}
|
|
type="default"
|
|
className={cn('gap-0 justify-between', className?.includes('w-full') && 'w-full')}
|
|
iconRight={<ChevronDown strokeWidth={1.5} />}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{selectedItem?.icon ? <ConnectionIcon icon={selectedItem.icon} /> : <Box size={12} />}
|
|
{selectedItem?.label}
|
|
</div>
|
|
</Button>
|
|
</PopoverTrigger_Shadcn_>
|
|
</div>
|
|
<PopoverContent_Shadcn_
|
|
className="p-0 w-radix-popover-trigger-width min-w-48"
|
|
side="bottom"
|
|
align="start"
|
|
onOpenAutoFocus={(e) => e.preventDefault()}
|
|
>
|
|
<Command_Shadcn_>
|
|
<CommandInput_Shadcn_ placeholder="Search..." />
|
|
<CommandList_Shadcn_>
|
|
<CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
|
|
<CommandGroup_Shadcn_>
|
|
{items.map((item) => (
|
|
<CommandItem_Shadcn_
|
|
key={item.key}
|
|
value={item.key}
|
|
onSelect={() => handleSelect(item.key)}
|
|
className="flex gap-2 items-center"
|
|
>
|
|
{item.icon ? <ConnectionIcon icon={item.icon} /> : <Box size={12} />}
|
|
{item.label}
|
|
<Check
|
|
size={15}
|
|
className={cn('ml-auto', item.key === value ? 'opacity-100' : 'opacity-0')}
|
|
/>
|
|
</CommandItem_Shadcn_>
|
|
))}
|
|
</CommandGroup_Shadcn_>
|
|
</CommandList_Shadcn_>
|
|
</Command_Shadcn_>
|
|
</PopoverContent_Shadcn_>
|
|
</Popover_Shadcn_>
|
|
)
|
|
}
|