mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +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). ```
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { ArrowDownNarrowWideIcon, ArrowDownWideNarrowIcon } from 'lucide-react'
|
|
import {
|
|
Button,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
} from 'ui'
|
|
|
|
type SortOption = {
|
|
label: string
|
|
value: string
|
|
}
|
|
|
|
interface SortDropdownProps {
|
|
options: SortOption[]
|
|
value: string
|
|
setValue: (value: string) => void
|
|
}
|
|
|
|
export const SortDropdown = ({ options, value, setValue }: SortDropdownProps) => {
|
|
const [sortColumn, sortOrder] = value.split('_')
|
|
const columnLabel = options.find((x) => x.value === sortColumn)?.label
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
icon={sortOrder === 'desc' ? <ArrowDownWideNarrowIcon /> : <ArrowDownNarrowWideIcon />}
|
|
>
|
|
Sorted by {columnLabel ?? sortColumn}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent className="w-44" align="start">
|
|
<DropdownMenuRadioGroup value={value} onValueChange={setValue}>
|
|
{options.map((option) => {
|
|
return (
|
|
<DropdownMenuSub key={option.value}>
|
|
<DropdownMenuSubTrigger>Sort by {option.label}</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuRadioItem value={`${option.value}_asc`}>
|
|
Ascending
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value={`${option.value}_desc`}>
|
|
Descending
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
)
|
|
})}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|