import { FilePlus2, Inbox, Plus } from "lucide-react";
import { Button, Card, EmptyState } from "@sisyphos-ui/react";

export function ProjectsEmptyPanel() {
  return (
    <Card variant="elevated">
      <Card.Body>
        <div className="flex items-center justify-between gap-3 border-b pb-4">
          <div>
            <h3 className="font-bold">Projects</h3>
            <p className="mt-0.5 text-xs text-zinc-500">Everything you ship lives here.</p>
          </div>
          <Button size="sm" variant="outlined" startIcon={<Plus className="size-4" />}>
            New project
          </Button>
        </div>

        <div className="mt-6">
          <EmptyState
            size="lg"
            icon={<Inbox className="size-8" />}
            title="No projects yet"
            description="When you create your first project, it lands here."
            actions={
              <>
                <Button startIcon={<FilePlus2 className="size-4" />}>
                  Create your first project
                </Button>
                <Button variant="text">Import from template</Button>
              </>
            }
          />
        </div>
      </Card.Body>
    </Card>
  );
}
Components used

Used in templates
