Empty

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/base-vega/components/example"
5import { Button } from "@/registry/base-vega/ui/button"
6import {
7  Empty,
8  EmptyContent,
9  EmptyDescription,
10  EmptyHeader,
11  EmptyMedia,
12  EmptyTitle,
13} from "@/registry/base-vega/ui/empty"
14import {
15  InputGroup,
16  InputGroupAddon,
17  InputGroupInput,
18} from "@/registry/base-vega/ui/input-group"
19import { Kbd } from "@/registry/base-vega/ui/kbd"
20import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
21 
22export default function EmptyExample() {
23  return (
24    <ExampleWrapper>
25      <EmptyBasic />
26      <EmptyWithMutedBackground />
27      <EmptyWithBorder />
28      <EmptyWithIcon />
29      <EmptyWithMutedBackgroundAlt />
30      <EmptyInCard />
31    </ExampleWrapper>
32  )
33}
34 
35function EmptyBasic() {
36  return (
37    <Example title="Basic">
38      <Empty>
39        <EmptyHeader>
40          <EmptyTitle>No projects yet</EmptyTitle>
41          <EmptyDescription>
42            You haven&apos;t created any projects yet. Get started by creating
43            your first project.
44          </EmptyDescription>
45        </EmptyHeader>
46        <EmptyContent>
47          <div className="flex gap-2">
48            <Button render={<a href="#" />} nativeButton={false}>
49              Create project
50            </Button>
51            <Button variant="outline">Import project</Button>
52          </div>
53          <Button
54            variant="link"
55            render={<a href="#" />}
56            className="text-muted-foreground"
57            nativeButton={false}
58          >
59            Learn more{" "}
60            <IconPlaceholder
61              lucide="ArrowUpRightIcon"
62              tabler="IconArrowUpRight"
63              hugeicons="ArrowUpRight01Icon"
64              phosphor="ArrowUpRightIcon"
65              remixicon="RiArrowRightUpLine"
66            />
67          </Button>
68        </EmptyContent>
69      </Empty>
70    </Example>
71  )
72}
73 
74function EmptyWithMutedBackground() {
75  return (
76    <Example title="With Muted Background">
77      <Empty className="bg-muted">
78        <EmptyHeader>
79          <EmptyTitle>No results found</EmptyTitle>
80          <EmptyDescription>
81            No results found for your search. Try adjusting your search terms.
82          </EmptyDescription>
83        </EmptyHeader>
84        <EmptyContent>
85          <Button>Try again</Button>
86          <Button
87            variant="link"
88            render={<a href="#" />}
89            className="text-muted-foreground"
90// … truncated