EmptyDemo() — ui Function Reference

Architecture documentation for the EmptyDemo() function in empty-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ EmptyDemo() — ui Function Reference

Dependency Diagram

graph TD
  13e2b56a_8c3a_2ff0_b403_01e5a620ca12["EmptyDemo()"]
  1660eb52_851f_959a_424b_885b77543f57["empty-demo.tsx"]
  13e2b56a_8c3a_2ff0_b403_01e5a620ca12 -->|defined in| 1660eb52_851f_959a_424b_885b77543f57
  style 13e2b56a_8c3a_2ff0_b403_01e5a620ca12 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/empty-demo.tsx lines 34–250

export function EmptyDemo() {
  return (
    <div className="grid w-full gap-8">
      <Empty className="min-h-[80svh]">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <IconFolderCode />
          </EmptyMedia>
          <EmptyTitle>No projects yet</EmptyTitle>
          <EmptyDescription>
            You haven&apos;t created any projects yet. Get started by creating
            your first project.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <div className="flex gap-2">
            <Button asChild>
              <a href="#">Create project</a>
            </Button>
            <Button variant="outline">Import project</Button>
          </div>
          <Button variant="link" asChild className="text-muted-foreground">
            <a href="#">
              Learn more <IconArrowUpRight />
            </a>
          </Button>
        </EmptyContent>
      </Empty>
      <Empty className="bg-muted min-h-[80svh]">
        <EmptyHeader>
          <EmptyTitle>No results found</EmptyTitle>
          <EmptyDescription>
            No results found for your search. Try adjusting your search terms.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button>Try again</Button>
          <Button variant="link" asChild className="text-muted-foreground">
            <a href="#">
              Learn more <IconArrowUpRight />
            </a>
          </Button>
        </EmptyContent>
      </Empty>
      <Empty className="min-h-[80svh] border">
        <EmptyHeader>
          <EmptyTitle>404 - Not Found</EmptyTitle>
          <EmptyDescription>
            The page you&apos;re looking for doesn&apos;t exist. Try searching
            for what you need below.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <InputGroup className="w-3/4">
            <InputGroupInput placeholder="Try searching for pages..." />
            <InputGroupAddon>
              <SearchIcon />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <Kbd>/</Kbd>
            </InputGroupAddon>
          </InputGroup>
          <EmptyDescription>
            Need help? <a href="#">Contact support</a>
          </EmptyDescription>
        </EmptyContent>
      </Empty>
      <Empty className="min-h-[80svh]">
        <EmptyHeader>
          <EmptyTitle>Nothing to see here</EmptyTitle>
          <EmptyDescription>
            No posts have been created yet. Get started by{" "}
            <a href="#">creating your first post</a> to share with the
            community.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button variant="outline">
            <PlusIcon />
            New Post
          </Button>