Empty

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import { Button } from "@/registry/bases/radix/ui/button"
6import {
7  Empty,
8  EmptyContent,
9  EmptyDescription,
10  EmptyHeader,
11  EmptyMedia,
12  EmptyTitle,
13} from "@/registry/bases/radix/ui/empty"
14import {
15  InputGroup,
16  InputGroupAddon,
17  InputGroupInput,
18} from "@/registry/bases/radix/ui/input-group"
19import { Kbd } from "@/registry/bases/radix/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 asChild>
49              <a href="#">Create project</a>
50            </Button>
51            <Button variant="outline">Import project</Button>
52          </div>
53          <Button variant="link" asChild className="text-muted-foreground">
54            <a href="#">
55              Learn more{" "}
56              <IconPlaceholder
57                lucide="ArrowUpRightIcon"
58                tabler="IconArrowUpRight"
59                hugeicons="ArrowUpRight01Icon"
60                phosphor="ArrowUpRightIcon"
61              />
62            </a>
63          </Button>
64        </EmptyContent>
65      </Empty>
66    </Example>
67  )
68}
69 
70function EmptyWithMutedBackground() {
71  return (
72    <Example title="With Muted Background">
73      <Empty className="bg-muted">
74        <EmptyHeader>
75          <EmptyTitle>No results found</EmptyTitle>
76          <EmptyDescription>
77            No results found for your search. Try adjusting your search terms.
78          </EmptyDescription>
79        </EmptyHeader>
80        <EmptyContent>
81          <Button>Try again</Button>
82          <Button variant="link" asChild className="text-muted-foreground">
83            <a href="#">
84              Learn more{" "}
85              <IconPlaceholder
86                lucide="ArrowUpRightIcon"
87                tabler="IconArrowUpRight"
88// … truncated