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). ```
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { DiamondIcon, FingerprintIcon, HashIcon, KeyIcon } from 'lucide-react'
|
|
|
|
export const SchemaGraphLegend = () => {
|
|
return (
|
|
<div className="absolute bottom-0 left-0 border-t flex justify-center px-1 py-2 shadow-md bg-surface-100 w-full z-10">
|
|
<ul className="flex flex-wrap items-center justify-center gap-4">
|
|
<li className="flex items-center text-xs font-mono gap-1">
|
|
<KeyIcon size={15} strokeWidth={1.5} className="shrink-0 text-light" />
|
|
Primary key
|
|
</li>
|
|
<li className="flex items-center text-xs font-mono gap-1">
|
|
<HashIcon size={15} strokeWidth={1.5} className="shrink-0 text-light" />
|
|
Identity
|
|
</li>
|
|
<li className="flex items-center text-xs font-mono gap-1">
|
|
<FingerprintIcon size={15} strokeWidth={1.5} className="shrink-0 text-light" />
|
|
Unique
|
|
</li>
|
|
<li className="flex items-center text-xs font-mono gap-1">
|
|
<DiamondIcon size={15} strokeWidth={1.5} className="shrink-0 text-light" />
|
|
Nullable
|
|
</li>
|
|
<li className="flex items-center text-xs font-mono gap-1">
|
|
<DiamondIcon
|
|
size={15}
|
|
strokeWidth={1.5}
|
|
fill="currentColor"
|
|
className="shrink-0 text-light"
|
|
/>
|
|
Non-Nullable
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|