1- import { PlusIcon , TableIcon } from "@radix-ui/react-icons" ;
1+ import {
2+ PlusIcon ,
3+ TableIcon ,
4+ MixerHorizontalIcon ,
5+ ChevronDownIcon ,
6+ DotsVerticalIcon ,
7+ } from "@radix-ui/react-icons" ;
28import { useContext } from "react" ;
39import { CreateNewTable } from "@common/features/data/components/DataSidebar" ;
410import { EmptySection } from "@common/elements/EmptySection" ;
@@ -9,9 +15,12 @@ import { Loading } from "@common/elements/Loading";
915import { Button } from "@common/elements/Button" ;
1016import { Sheet } from "@common/elements/Sheet" ;
1117
18+ // Example table data for the background
19+ const EXAMPLE_COLUMNS = [ "_id" , "name" , "email" , "_creationTime" ] ;
20+
1221export function EmptyData ( ) {
1322 return (
14- < div className = "flex h-full p-6" >
23+ < div className = "flex h-full items-center justify-center p-6" >
1524 < EmptyDataContent noTables />
1625 </ div >
1726 ) ;
@@ -45,54 +54,159 @@ export function EmptyDataContent({
4554 }
4655
4756 return (
48- < Sheet padding = { false } className = "w-full" >
49- < EmptySection
50- Icon = { TableIcon }
51- header = {
52- noTables ? "There are no tables here yet." : "This table is empty."
53- }
54- sheet = { false }
55- body = {
56- noTables
57- ? "Create a table to start storing data."
58- : "Create a document or run a mutation to start storing data."
59- }
60- action = {
61- noTables ? (
62- < CreateNewTable tableData = { tableMetadata } />
63- ) : (
64- < >
65- { openAddDocuments && (
66- < Button
67- inline
68- onClick = { ( ) => {
69- log ( "open add documents panel" , { how : "empty data" } ) ;
70- openAddDocuments ( ) ;
71- } }
72- size = "sm"
73- disabled = {
74- ! canAddDocuments ||
75- ! ! ( selectedNent && selectedNent . state !== "active" )
76- }
77- tip = {
78- selectedNent && selectedNent . state !== "active"
79- ? "Cannot add documents in an unmounted component."
80- : ! canAddDocuments &&
81- "You do not have permission to add documents in production."
82- }
83- icon = { < PlusIcon aria-hidden = "true" /> }
84- >
85- Add Documents
86- </ Button >
87- ) }
88- </ >
89- )
90- }
91- learnMoreButton = { {
92- href : "https://docs.convex.dev/quickstarts" ,
93- children : "Follow a quickstart guide for your favorite framework." ,
94- } }
95- />
96- </ Sheet >
57+ < div className = "relative h-full w-full" >
58+ { /* Background table example */ }
59+ < div className = "pointer-events-none absolute inset-0 opacity-50" >
60+ < div className = "flex h-full w-full flex-col" >
61+ { /* Example DataToolbar */ }
62+ { noTables && (
63+ < div className = "mb-2 flex flex-col" inert >
64+ < div className = "flex flex-wrap items-end justify-between gap-4" >
65+ < div className = "flex max-w-full items-center gap-4" >
66+ < div className = "flex max-w-full flex-col gap-1" >
67+ < h3 className = "flex select-none items-start gap-0.5 font-mono text-content-secondary" >
68+ example_table
69+ </ h3 >
70+ </ div >
71+ </ div >
72+ < div className = "flex flex-wrap items-center gap-2" >
73+ < Button size = "sm" variant = "neutral" icon = { < PlusIcon /> } >
74+ Add
75+ </ Button >
76+ < Button
77+ size = "sm"
78+ variant = "neutral"
79+ icon = { < DotsVerticalIcon className = "m-[3px]" /> }
80+ />
81+ </ div >
82+ </ div >
83+ </ div >
84+ ) }
85+
86+ { /* Example DataFilters */ }
87+ < div
88+ className = "flex w-full flex-col gap-2 rounded-t border border-b-0 bg-background-secondary/50 p-2"
89+ inert
90+ >
91+ < div className = "flex justify-between gap-2" >
92+ < div className = "flex items-center" >
93+ < div className = "flex w-full rounded bg-background-secondary" >
94+ < Button
95+ size = "xs"
96+ variant = "neutral"
97+ className = "w-fit rounded-l-none border border-border-transparent text-xs"
98+ icon = { < MixerHorizontalIcon className = "size-3.5" /> }
99+ >
100+ < div className = "flex items-center gap-2" >
101+ < span > Filter & Sort </ span >
102+ </ div >
103+ < ChevronDownIcon />
104+ </ Button >
105+ </ div >
106+ </ div >
107+ < div className = "flex gap-2" >
108+ < div className = "flex items-center gap-1 whitespace-nowrap text-xs" >
109+ < span className = "h-3 w-24 bg-content-secondary/30" />
110+ </ div >
111+ </ div >
112+ </ div >
113+ </ div >
114+
115+ { /* Table */ }
116+ < div
117+ className = "flex h-full w-full flex-col overflow-hidden rounded rounded-t-none border bg-background-secondary"
118+ inert
119+ >
120+ < table className = "h-full w-full table-fixed" >
121+ < thead >
122+ < tr className = "border-b bg-background-secondary" >
123+ { EXAMPLE_COLUMNS . map ( ( col ) => (
124+ < th
125+ key = { col }
126+ className = "select-none border-r p-3 text-left text-xs font-semibold text-content-secondary last:border-r-0"
127+ >
128+ { col }
129+ </ th >
130+ ) ) }
131+ </ tr >
132+ </ thead >
133+ < tbody className = "divide-y" >
134+ { Array . from ( { length : 20 } ) . map ( ( _ , i ) => (
135+ < tr key = { i } className = "group" >
136+ { EXAMPLE_COLUMNS . map ( ( col ) => (
137+ // eslint-disable-next-line jsx-a11y/control-has-associated-label
138+ < td
139+ key = { col }
140+ className = "border-r p-3 last:border-r-0 group-last:border-b-0"
141+ >
142+ < div className = "h-3 w-full max-w-64 bg-content-secondary/30" />
143+ </ td >
144+ ) ) }
145+ </ tr >
146+ ) ) }
147+ </ tbody >
148+ </ table >
149+ </ div >
150+ </ div >
151+ </ div >
152+
153+ { /* Main content */ }
154+ < div className = "absolute inset-0 flex items-center justify-center" >
155+ < Sheet
156+ padding = { false }
157+ className = "m-6 h-fit w-fit bg-background-secondary/90 p-2 backdrop-blur-[2px]"
158+ >
159+ < EmptySection
160+ Icon = { TableIcon }
161+ header = {
162+ noTables
163+ ? "There are no tables here yet."
164+ : "This table is empty."
165+ }
166+ sheet = { false }
167+ body = {
168+ noTables
169+ ? "Create a table to start storing data."
170+ : "Create a document or run a mutation to start storing data."
171+ }
172+ action = {
173+ noTables ? (
174+ < CreateNewTable tableData = { tableMetadata } />
175+ ) : (
176+ < >
177+ { openAddDocuments && (
178+ < Button
179+ inline
180+ onClick = { ( ) => {
181+ log ( "open add documents panel" , { how : "empty data" } ) ;
182+ openAddDocuments ( ) ;
183+ } }
184+ size = "sm"
185+ disabled = {
186+ ! canAddDocuments ||
187+ ! ! ( selectedNent && selectedNent . state !== "active" )
188+ }
189+ tip = {
190+ selectedNent && selectedNent . state !== "active"
191+ ? "Cannot add documents in an unmounted component."
192+ : ! canAddDocuments &&
193+ "You do not have permission to add documents in production."
194+ }
195+ icon = { < PlusIcon aria-hidden = "true" /> }
196+ >
197+ Add Documents
198+ </ Button >
199+ ) }
200+ </ >
201+ )
202+ }
203+ learnMoreButton = { {
204+ href : "https://docs.convex.dev/quickstarts" ,
205+ children : "Follow a quickstart guide" ,
206+ } }
207+ />
208+ </ Sheet >
209+ </ div >
210+ </ div >
97211 ) ;
98212}
0 commit comments