konnosDashboard
TableMenuEmptyState.tsx47 lines · main
1import { Pointer } from 'lucide-react'
2import { cn, TreeViewItemVariant } from 'ui'
3import { InnerSideBarEmptyPanel } from 'ui-patterns/InnerSideMenu'
4
5import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon'
6
7export const TableMenuEmptyState = () => {
8 return (
9 <InnerSideBarEmptyPanel
10 title="No tables or views"
11 description="Any tables or views you create will be listed here."
12 className="mx-4"
13 >
14 <div className="top-0 left-6 flex flex-col opacity-50 cursor-not-allowed bg-dash-sidebar h-content -mb-7 pointer-events-none scale-75">
15 <div className="relative h-content">
16 <div className="absolute inset-0 pointer-events-none z-10">
17 <div className="absolute inset-0 bg-linear-to-t from-transparent from-80% to-100% to-background-surface-100 dark:to-background-surface-75" />
18 <div className="absolute inset-0 bg-linear-to-r from-transparent from-50% to-100% to-background-surface-100 dark:to-background-surface-75" />
19 </div>
20 <div className="absolute left-[150px] bottom-[21px] text-foreground-muted z-10 pointer-events-none">
21 <Pointer size={16} className="text-foreground-light" strokeWidth={1.5} />
22 </div>
23 {[...Array(4)].map((_, i) => (
24 <div className="border-l pointer-events-none" key={`some-${i}`}>
25 <div
26 className={cn(
27 'group',
28 TreeViewItemVariant({
29 isSelected: i === 2 ? true : false,
30 isOpened: i === 2 ? true : false,
31 isPreview: false,
32 }),
33 'px-4 min-w-40'
34 )}
35 aria-selected={i === 2}
36 >
37 {i === 2 && <div className="absolute left-0 h-full w-0.5 bg-foreground" />}
38 <EntityTypeIcon type={'r'} />
39 {`postgres_table_${i}`}
40 </div>
41 </div>
42 ))}
43 </div>
44 </div>
45 </InnerSideBarEmptyPanel>
46 )
47}