mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 23:29:08 +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). ```
48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
import { PointerIcon } from 'lucide-react'
|
|
import { cn, TreeViewItemVariant } from 'ui'
|
|
import { InnerSideBarEmptyPanel } from 'ui-patterns/InnerSideMenu'
|
|
|
|
import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon'
|
|
|
|
export const TableMenuEmptyState = () => {
|
|
return (
|
|
<InnerSideBarEmptyPanel
|
|
title="No tables or views"
|
|
description="Any tables or views you create will be listed here."
|
|
className="mx-4"
|
|
>
|
|
<div className="top-0 left-6 flex flex-col opacity-50 cursor-not-allowed bg-dash-sidebar -mb-7 pointer-events-none scale-75">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 pointer-events-none z-10">
|
|
<div className="absolute inset-0 bg-linear-to-t from-transparent from-80% to-100% to-background-surface-100 dark:to-background-surface-75" />
|
|
<div className="absolute inset-0 bg-linear-to-r from-transparent from-50% to-100% to-background-surface-100 dark:to-background-surface-75" />
|
|
</div>
|
|
<div className="absolute left-[150px] bottom-[21px] text-foreground-muted z-10 pointer-events-none">
|
|
<PointerIcon size={16} className="text-foreground-light" strokeWidth={1.5} />
|
|
</div>
|
|
{[...Array(4)].map((_, i) => (
|
|
<div className="border-l pointer-events-none" key={`some-${i}`}>
|
|
<div
|
|
className={cn(
|
|
'group',
|
|
TreeViewItemVariant({
|
|
isSelected: i === 2 ? true : false,
|
|
isOpened: i === 2 ? true : false,
|
|
isPreview: false,
|
|
}),
|
|
'px-4 min-w-40'
|
|
)}
|
|
aria-selected={i === 2}
|
|
>
|
|
{i === 2 && <div className="absolute left-0 h-full w-0.5 bg-foreground" />}
|
|
<EntityTypeIcon type={'r'} />
|
|
{`postgres_table_${i}`}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</InnerSideBarEmptyPanel>
|
|
)
|
|
}
|