Empty

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import { Button } from "@/registry/radix-sera/ui/button"
6import {
7  Empty,
8  EmptyContent,
9  EmptyDescription,
10  EmptyHeader,
11  EmptyMedia,
12  EmptyTitle,
13} from "@/registry/radix-sera/ui/empty"
14import {
15  InputGroup,
16  InputGroupAddon,
17  InputGroupInput,
18} from "@/registry/radix-sera/ui/input-group"
19import { Kbd } from "@/registry/radix-sera/ui/kbd"
20import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
21 
22export default function EmptyExample() {
23  return (
24    <ExampleWrapper className="grid-cols-1!">
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                remixicon="RiArrowRightUpLine"
62              />
63            </a>
64          </Button>
65        </EmptyContent>
66      </Empty>
67    </Example>
68  )
69}
70 
71function EmptyWithMutedBackground() {
72  return (
73    <Example title="With Muted Background">
74      <Empty className="bg-muted">
75        <EmptyHeader>
76          <EmptyTitle>No results found</EmptyTitle>
77          <EmptyDescription>
78            No results found for your search. Try adjusting your search terms.
79          </EmptyDescription>
80        </EmptyHeader>
81        <EmptyContent>
82          <Button>Try again</Button>
83          <Button variant="link" asChild className="text-muted-foreground">
84            <a href="#">
85              Learn more{" "}
86              <IconPlaceholder
87// … truncated