mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 01:39:53 +08:00
108f99f5fc
## Problem <img width="500" height="470" alt="image" src="https://github.com/user-attachments/assets/17536208-9b7b-4a05-bd04-03def662dd28" /> ## Solution <img width="244" height="244" alt="image" src="https://github.com/user-attachments/assets/f6d3ea4f-f36c-45a3-b4aa-ea37bb6a6e22" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Adjusted the empty-state illustration layout by removing explicit height constraint classes from the wrapper elements. The component's vertical sizing is now managed through alternative approaches while preserving existing positioning, scale transformations, and pointer-event configurations. These refinements maintain visual consistency while improving the overall layout behavior for the empty state display. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46494?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 -->
48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
import { Pointer } 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">
|
|
<Pointer 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>
|
|
)
|
|
}
|