Empty

import { FolderOpenIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyActions,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

export default function EmptyDemo() {
  return (
    <Empty>
      <EmptyMedia variant="icon">
        <FolderOpenIcon />
      </EmptyMedia>
      <EmptyTitle>No projects yet</EmptyTitle>
      <EmptyDescription>
        Projects group your docs, tasks and files. Create one to get started, or
        import from Linear or Jira.
      </EmptyDescription>
      <EmptyActions>
        <Button>
          <PlusIcon />
          New project
        </Button>
        <Button variant="outline">Import</Button>
      </EmptyActions>
    </Empty>
  );
}

import { UploadCloudIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyActions,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

export default function EmptyOutline() {
  return (
    <Empty variant="outline" className="max-w-md">
      <EmptyMedia variant="round">
        <UploadCloudIcon />
      </EmptyMedia>
      <EmptyTitle>No files in this folder</EmptyTitle>
      <EmptyDescription>
        Upload contracts, invoices or receipts. PDF, PNG and JPG up to 25 MB.
      </EmptyDescription>
      <EmptyActions>
        <Button variant="outline" size="sm">
          Upload files
        </Button>
      </EmptyActions>
    </Empty>
  );
}

import { SearchXIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyActions,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { SearchField } from "@/components/ui/search-field";

const people = ["Ana Souza", "Ben Okafor", "Chloé Martin", "Dev Patel"];

export default function EmptySearch() {
  const [query, setQuery] = useState("Zoe");
  const results = people.filter((p) =>
    p.toLowerCase().includes(query.toLowerCase()),
  );
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <SearchField
        aria-label="Search members"
        value={query}
        onChange={setQuery}
      />
      {results.length ? (
        <ul className="flex flex-col divide-y rounded-lg border text-sm">
          {results.map((p) => (
            <li key={p} className="px-3 py-2">
              {p}
            </li>
          ))}
        </ul>
      ) : (
        <Empty variant="muted" size="sm" role="status">
          <EmptyMedia>
            <SearchXIcon />
          </EmptyMedia>
          <EmptyTitle>No members match "{query}"</EmptyTitle>
          <EmptyDescription>
            Check the spelling, or invite them to the workspace.
          </EmptyDescription>
          <EmptyActions>
            <Button variant="ghost" size="sm" onPress={() => setQuery("")}>
              Clear search
            </Button>
          </EmptyActions>
        </Empty>
      )}
    </div>
  );
}

import { Avatar, AvatarGroup } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyActions,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

export default function EmptyAvatars() {
  return (
    <Empty size="lg">
      <EmptyMedia>
        <AvatarGroup size="lg">
          <Avatar fallback="MC" colorful />
          <Avatar fallback="JW" colorful />
          <Avatar fallback="AS" colorful />
        </AvatarGroup>
      </EmptyMedia>
      <EmptyTitle>Invite your team</EmptyTitle>
      <EmptyDescription>
        You're the only member of Harbor & Pine. Teammates can comment, assign
        tasks and share files.
      </EmptyDescription>
      <EmptyActions>
        <Button>Invite members</Button>
        <Button variant="ghost">Copy invite link</Button>
      </EmptyActions>
    </Empty>
  );
}

import { BellOffIcon } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Empty,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

export default function EmptyInCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader separator>
        <CardTitle>Notifications</CardTitle>
      </CardHeader>
      <CardContent>
        <Empty size="sm">
          <EmptyMedia variant="icon">
            <BellOffIcon />
          </EmptyMedia>
          <EmptyTitle className="text-sm">You're all caught up</EmptyTitle>
          <EmptyDescription className="text-xs">
            New mentions, assignments and replies will show up here.
          </EmptyDescription>
        </Empty>
      </CardContent>
    </Card>
  );
}