PrivateSqlSnippetEmpty.tsx34 lines · main

1	import { Pointer } from 'lucide-react'
2	import { TreeViewItem } from 'ui'
3	import { InnerSideBarEmptyPanel } from 'ui-patterns'
4
5	export const EmptyPrivateQueriesPanel = () => (
6	<InnerSideBarEmptyPanel
7	title="No private queries created yet"
8	description="Queries will be automatically saved once you start writing in the editor"
9	className="mx-4"
10	>
11	<div className="top-0 left-6 flex flex-col opacity-50 cursor-not-allowed bg-dash-sidebar -mb-7 pointer-events-none scale-75">
12	<div className="relative">
13	<div className="absolute inset-0 pointer-events-none z-10">
14	<div className="absolute inset-0 bg-linear-to-t from-transparent from-80% to-100% to-background-surface-100 dark:to-background-surface-75" />
15	<div className="absolute inset-0 bg-linear-to-r from-transparent from-50% to-100% to-background-surface-100 dark:to-background-surface-75" />
16	</div>
17	<div className="absolute left-[128px] bottom-[21px] text-foreground-muted z-10 pointer-events-none">
18	<Pointer size={16} className="text-foreground-light" strokeWidth={1.5} />
19	</div>
20	{[...Array(4)].map((_, i) => (
21	<div className="border-l pointer-events-none" key={`dummy-${i + 1}`}>
22	<TreeViewItem
23	isSelected={i === 2}
24	id={`dummy-${i + 1}`}
25	name={`dummy_query_${i + 1}`}
26	level={1}
27	xPadding={16}
28	/>
29	</div>
30	))}
31	</div>
32	</div>
33	</InnerSideBarEmptyPanel>
34	)