Empty Project State

1import * as React from "react";
2import { ArrowRight, FolderPlus, Sparkles, Upload } from "lucide-react";
3 
4import { Button } from "@/components/ui/button";
5import {
6  Empty,
7  EmptyContent,
8  EmptyDescription,
9  EmptyHeader,
10  EmptyMedia,
11  EmptyTitle,
12} from "@/components/ui/empty";
13import { cn } from "@/lib/utils";
14 
15function EmptyProject01({
16  className,
17  ...props
18}: React.ComponentProps<"section">) {
19  return (
20    <section
21      className={cn(
22        "relative grid min-h-[560px] place-items-center overflow-hidden rounded-[2rem] border border-foreground/10 bg-background p-6",
23        className,
24      )}
25      {...props}
26    >
27      <div className="absolute inset-0 [background-image:radial-gradient(circle_at_center,color-mix(in_oklch,var(--primary)_10%,transparent),transparent_42%),linear-gradient(to_right,color-mix(in_oklch,var(--foreground)_4%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklch,var(--foreground)_4%,transparent)_1px,transparent_1px)] [background-size:auto,40px_40px,40px_40px] [mask-image:radial-gradient(circle_at_center,black,transparent_70%)]" />
28      <Empty className="relative max-w-xl border-0 bg-transparent">
29        <EmptyHeader>
30          <EmptyMedia variant="icon">
31            <FolderPlus />
32          </EmptyMedia>
33          <div className="mb-1 flex items-center justify-center gap-1.5 text-xs font-semibold uppercase tracking-[.12em] text-primary">
34            <Sparkles className="size-3.5" />
35            Your first project
36          </div>
37          <EmptyTitle>Turn an idea into something real.</EmptyTitle>
38          <EmptyDescription>
39            Create a blank project or import an existing design. Your team can
40            join whenever you are ready.
41          </EmptyDescription>
42        </EmptyHeader>
43        <EmptyContent>
44          <Button>
45            Create project <ArrowRight />
46          </Button>
47          <Button variant="outline">
48            <Upload /> Import project
49          </Button>
50        </EmptyContent>
51        <p className="mt-2 text-xs text-muted-foreground">
52          Projects are private until you share them.
53        </p>
54      </Empty>
55    </section>
56  );
57}
58 
59export { EmptyProject01 };