Empty States

import { Button } from "@/components/ui/button";
import { Plus, PlusHexagon } from "@mynaui/icons-react";

export default function Basic() {
  return (
    <section className="mx-auto flex max-w-md flex-col items-center justify-center px-4 py-20 text-center">
      <div className="mx-auto rounded-full border bg-primary-foreground p-2">
        <PlusHexagon className="size-6" />
      </div>
      <h3 className="mt-2 text-sm font-medium">No tasks yet.</h3>
      <p className="mb-4 text-balance text-sm text-muted-foreground">
        Create a new task to get started.
      </p>
      <Button size="sm" variant="outline">
        <Plus className="size-5 stroke-2 text-muted-foreground" />
        Create Task
      </Button>
    </section>
  );
}

import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Lock, LockOpen } from "@mynaui/icons-react";

export default function NoPermission() {
  return (
    <section className="mx-auto flex max-w-md flex-col items-center justify-center px-4 py-20">
      <div className="flex items-start gap-4">
        <div className="rounded-full border bg-primary-foreground p-2">
          <Lock className="size-5" />
        </div>
        <div>
          <h3 className="text-sm font-medium">
            You don&apos;t have permission to access this page.
          </h3>
          <p className="mt-1 text-balance text-sm text-muted-foreground">
            Please contact your administrator for more information, or go back
            to the dashboard.
          </p>
        </div>
      </div>
      <form action="#" className="mt-6 flex w-full flex-col gap-2">
        <Textarea
          cols={30}
          id="admin"
          name="admin"
          className="w-full"
          placeholder="Request access to this page..."
        />
        <Button size="sm" variant="outline" type="submit">
          <LockOpen className="size-4 stroke-2 text-muted-foreground" />
          Send Request
        </Button>
      </form>
    </section>
  );
}

import { Button } from "@/components/ui/button";
import { Campfire } from "@mynaui/icons-react";

export default function Welcome() {
  return (
    <section className="mx-auto flex max-w-md flex-col items-center justify-center px-4 py-20 text-center">
      <Campfire className="mx-auto size-14 text-muted-foreground" />
      <h3 className="mt-4 text-xl font-bold tracking-tight">Welcome aboard!</h3>
      <p className="mb-6 text-balance text-sm text-muted-foreground">
        Keep all your important links in one place. Add a bookmark to get
        started.
      </p>
      <div className="flex w-full flex-col items-center justify-center gap-2 sm:flex-row-reverse">
        <Button>Add First Bookmark →</Button>
        <Button variant="outline">Create First Project →</Button>
      </div>
    </section>
  );
}

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { badgeVariants } from "@/components/ui/badge";
import {
  FileText,
  Heart,
  Image,
  Link,
  SearchOff,
  Video,
} from "@mynaui/icons-react";

export default function WithSuggestions() {
  return (
    <section className="mx-auto flex max-w-md flex-col items-center justify-center px-4 py-20 text-center">
      <SearchOff className="mx-auto size-10 text-muted-foreground" />
      <h3 className="mt-4 text-xl font-bold tracking-tight">Search again?</h3>
      <p className="mb-5 mt-2 text-balance text-muted-foreground">
        Your search did not match any bookmarks. Refine your search terms for
        better results.
      </p>
      <div className="flex w-full flex-wrap items-center justify-center gap-2">
        <a href="#" className={badgeVariants({ variant: "secondary" })}>
          <Image className="mr-1 size-4" />
          Images
        </a>
        <a href="#" className={badgeVariants({ variant: "secondary" })}>
          <FileText className="mr-1 size-4" />
          Articles
        </a>
        <a href="#" className={badgeVariants({ variant: "secondary" })}>
          <Heart className="mr-1 size-4" />
          Favorites
        </a>
        <a href="#" className={badgeVariants({ variant: "secondary" })}>
          <Video className="mr-1 size-4" />
          Videos
        </a>
        <a href="#" className={badgeVariants({ variant: "secondary" })}>
          <Link className="mr-1 size-4" />
          Links
        </a>
        <a href="#" className={badgeVariants({ variant: "secondary" })}>
          <Avatar className="mr-2 size-4">
            <AvatarImage src="/avatars/avatar-01.webp" />
          </Avatar>
          Ana&apos;s Bookmarks
        </a>
        <a href="#" className={badgeVariants({ variant: "secondary" })}>
          <Avatar className="mr-2 size-4">
            <AvatarImage src="/avatars/avatar-02.webp" />
          </Avatar>
          Emma&apos;s Bookmarks
        </a>
      </div>
    </section>
  );
}

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { UserPlus } from "@mynaui/icons-react";

export default function DashedInList() {
  return (
    <section className="mx-auto grid max-w-7xl grid-cols-1 gap-4 px-4 py-20 sm:grid-cols-2 md:grid-cols-4">
      <a
        href="#"
        className="flex w-full items-center gap-4 rounded border p-4 text-sm"
      >
        <Avatar>
          <AvatarImage src="/avatars/avatar-01.webp" />
        </Avatar>
        <div className="truncate">
          <h3 className="truncate font-semibold">Kristin Watson</h3>
          <p className="truncate text-muted-foreground">kristin@email.com</p>
        </div>
      </a>
      <a
        href="#"
        className="flex w-full items-center gap-4 rounded border p-4 text-sm"
      >
        <Avatar>
          <AvatarImage src="/avatars/avatar-02.webp" />
        </Avatar>
        <div className="truncate">
          <h3 className="truncate font-semibold">Courtney Henry</h3>
          <p className="truncate text-muted-foreground">courtney@email.com</p>
        </div>
      </a>
      <a
        href="#"
        className="flex w-full items-center gap-4 rounded border p-4 text-sm"
      >
        <Avatar>
          <AvatarImage src="/avatars/avatar-03.webp" />
        </Avatar>
        <div className="truncate">
          <h3 className="truncate font-semibold">Emma Cooper</h3>
          <p className="truncate text-muted-foreground">emmacooper@email.com</p>
        </div>
      </a>
      <a
        href="#"
        className="flex items-center justify-center gap-2 rounded border border-dashed p-4 text-center text-sm font-medium text-muted-foreground transition-colors hover:border-foreground hover:text-foreground"
      >
        <UserPlus className="size-6" />
        <p>Add Member</p>
      </a>
    </section>
  );
}