konnosDashboard
EmptyStates.tsx106 lines · main
1import { BoxPlus } from 'icons'
2import { Plus } from 'lucide-react'
3import Link from 'next/link'
4import {
5 Button,
6 Card,
7 Skeleton,
8 Table,
9 TableBody,
10 TableCell,
11 TableHead,
12 TableHeader,
13 TableRow,
14} from 'ui'
15import { EmptyStatePresentational } from 'ui-patterns'
16
17import { ShimmeringCard } from './ShimmeringCard'
18import { HomeIcon } from '@/components/layouts/Navigation/LayoutHeader/HomeIcon'
19import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
20
21export const Header = () => {
22 return (
23 <div className="flex items-center border-default border-b px-4 py-3.5">
24 <HomeIcon />
25 </div>
26 )
27}
28
29export const LoadingTableView = () => {
30 return (
31 <Card>
32 <Table>
33 <TableHeader>
34 <TableRow>
35 <TableHead>Project</TableHead>
36 <TableHead>Status</TableHead>
37 <TableHead>Compute</TableHead>
38 <TableHead>Region</TableHead>
39 <TableHead>Created</TableHead>
40 </TableRow>
41 </TableHeader>
42 <TableBody>
43 {[...Array(3)].map((_, i) => (
44 <TableRow key={i}>
45 <TableCell>
46 <Skeleton className="bg-surface-400 h-4 w-32"></Skeleton>
47 </TableCell>
48 <TableCell>
49 <Skeleton className="bg-surface-400 h-4 w-16"></Skeleton>
50 </TableCell>
51 <TableCell>
52 <Skeleton className="bg-surface-400 h-4 w-20"></Skeleton>
53 </TableCell>
54 <TableCell>
55 <Skeleton className="bg-surface-400 h-4 w-20"></Skeleton>
56 </TableCell>
57 <TableCell>
58 <Skeleton className="bg-surface-400 h-4 w-24"></Skeleton>
59 </TableCell>
60 </TableRow>
61 ))}
62 </TableBody>
63 </Table>
64 </Card>
65 )
66}
67
68export const LoadingCardView = () => {
69 return (
70 <ul className="w-full mx-auto grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
71 <ShimmeringCard />
72 <ShimmeringCard />
73 </ul>
74 )
75}
76
77export const NoProjectsState = ({ slug }: { slug: string }) => {
78 const projectCreationEnabled = useIsFeatureEnabled('projects:create')
79
80 return (
81 <EmptyStatePresentational
82 icon={BoxPlus}
83 title="Create a project"
84 description="Launch a complete backend built on Postgres."
85 >
86 {projectCreationEnabled && (
87 <Button size="tiny" type="default" asChild icon={<Plus />}>
88 <Link href={`/new/${slug}`}>New project</Link>
89 </Button>
90 )}
91 </EmptyStatePresentational>
92 )
93}
94
95export const NoOrganizationsState = () => {
96 return (
97 <EmptyStatePresentational
98 title="Create an organization"
99 description="Manage your team and projects in one place."
100 >
101 <Button size="tiny" type="primary" asChild icon={<Plus />}>
102 <Link href="/new">New organization</Link>
103 </Button>
104 </EmptyStatePresentational>
105 )
106}