mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Gildas Garcia
243e079a2c
## Problem The `_Shadcn_` suffix isn't needed anymore on `Command` components ## Solution - Remove the `_Shadcn_` suffix - Simplify UI package exports - Apply prettier <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Simplified command component imports and exports across the UI library by removing internal naming aliases and adopting direct component references. Updated the public UI package barrel export to use wildcard re-exports for cleaner API surface. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import { Box, Check, ChevronDown } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import {
|
|
Button,
|
|
cn,
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} 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 open={open} onOpenChange={setOpen} modal={false}>
|
|
<div className={cn('flex', className)}>
|
|
<PopoverTrigger 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>
|
|
</div>
|
|
<PopoverContent
|
|
className="p-0 w-radix-popover-trigger-width min-w-48"
|
|
side="bottom"
|
|
align="start"
|
|
onOpenAutoFocus={(e) => e.preventDefault()}
|
|
>
|
|
<Command>
|
|
<CommandInput placeholder="Search..." />
|
|
<CommandList>
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<CommandGroup>
|
|
{items.map((item) => (
|
|
<CommandItem
|
|
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>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|