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). ```
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { CircleAlertIcon, LightbulbIcon } from 'lucide-react'
|
|
import type { LucideIcon } from 'lucide-react'
|
|
|
|
export const ISSUE_DOT_COLORS: Record<
|
|
string,
|
|
{ border: string; background: string; color: string }
|
|
> = {
|
|
error: {
|
|
border: 'border-destructive-500',
|
|
background: 'bg-destructive-200',
|
|
color: 'text-destructive-600',
|
|
},
|
|
index: {
|
|
border: 'border-warning-500',
|
|
background: 'bg-warning-200',
|
|
color: 'text-warning-600',
|
|
},
|
|
slow: {
|
|
border: 'border-strong',
|
|
background: 'bg-alternative dark:bg-muted',
|
|
color: 'text-foreground-lighter',
|
|
},
|
|
}
|
|
|
|
export const ISSUE_ICONS: Record<string, LucideIcon> = {
|
|
error: CircleAlertIcon,
|
|
index: LightbulbIcon,
|
|
slow: CircleAlertIcon,
|
|
}
|
|
|
|
export const QUERY_INSIGHTS_EXPLORER_COLUMNS = [
|
|
{ id: 'query', name: 'Query', description: undefined, minWidth: 500 },
|
|
{ id: 'prop_total_time', name: 'Time consumed', description: undefined, minWidth: 150 },
|
|
{ id: 'calls', name: 'Calls', description: undefined, minWidth: 100 },
|
|
{ id: 'max_time', name: 'Max time', description: undefined, minWidth: 100 },
|
|
{ id: 'mean_time', name: 'Mean time', description: undefined, minWidth: 100 },
|
|
{ id: 'min_time', name: 'Min time', description: undefined, minWidth: 100 },
|
|
{ id: 'rows_read', name: 'Rows processed', description: undefined, minWidth: 130 },
|
|
{ id: 'cache_hit_rate', name: 'Cache hit rate', description: undefined, minWidth: 130 },
|
|
{ id: 'rolname', name: 'Role', description: undefined, minWidth: 200 },
|
|
{ id: 'application_name', name: 'Source', description: undefined, minWidth: 200 },
|
|
] as const
|
|
|
|
export const NON_SORTABLE_COLUMNS = [] as const
|