Notifications

import { X } from "@mynaui/icons-react";

export default function Basic() {
  return (
    <div
      className="flex w-full items-center justify-between rounded bg-background px-4 py-3 font-medium shadow-sm ring-1 ring-border sm:w-96"
      aria-live="assertive"
    >
      <span className="truncate text-sm">Bookmark saved!</span>
      <div className="flex shrink-0 items-center gap-3 text-sm">
        <a href="#" className="text-blue-600">
          Undo
        </a>
        <p aria-hidden="true" className="select-none text-border">
          |
        </p>
        <a href="#">
          <X className="size-4 text-muted-foreground" stroke={2} />
        </a>
      </div>
    </div>
  );
}

import { CheckCircle, X } from "@mynaui/icons-react";

export default function WithIcon() {
  return (
    <div
      className="flex w-full items-center justify-between rounded bg-background px-4 py-3 font-medium shadow-sm ring-1 ring-border sm:w-96"
      aria-live="assertive"
    >
      <div className="flex shrink-0 items-center gap-2">
        <CheckCircle className="size-5 text-emerald-500" stroke={2} />
        <span className="truncate text-sm">Bookmark saved!</span>
      </div>
      <div className="flex shrink-0 items-center gap-3 text-sm">
        <a href="#" className="text-blue-600">
          Undo
        </a>
        <p aria-hidden="true" className="select-none text-border">
          |
        </p>
        <a href="#">
          <X className="size-4 text-muted-foreground" stroke={2} />
        </a>
      </div>
    </div>
  );
}

import { Trash, X } from "@mynaui/icons-react";

export default function WithDescription() {
  return (
    <div
      className="flex w-full flex-col rounded bg-background px-4 py-3 font-medium shadow-sm ring-1 ring-border sm:w-96"
      aria-live="assertive"
    >
      <div className="flex items-center justify-between">
        <div className="flex shrink-0 items-center gap-2">
          <Trash className="size-5 text-destructive" stroke={2} />
          <span className="truncate text-sm">Bookmark Deleted!</span>
        </div>
        <div className="flex shrink-0 items-center gap-3 text-sm">
          <a href="#" className="text-blue-600">
            Undo
          </a>
          <p aria-hidden="true" className="select-none text-border">
            |
          </p>
          <a href="#">
            <X className="size-4 text-muted-foreground" stroke={2} />
          </a>
        </div>
      </div>
      <p className="pt-4 text-sm font-normal text-muted-foreground">
        In id dolore irure sint nostrud Lorem est enim aliqua esse pariatur.
        Amet consectetur qui veniam.
      </p>
    </div>
  );
}

import { InfoCircle, X } from "@mynaui/icons-react";

export default function WithActions() {
  return (
    <div
      className="flex w-full flex-col rounded bg-background px-4 py-3 font-medium shadow-sm ring-1 ring-border sm:w-96"
      aria-live="assertive"
    >
      <div className="flex items-center justify-between">
        <div className="flex shrink-0 items-center gap-2">
          <InfoCircle className="size-5 text-muted-foreground" stroke={2} />
          <span className="truncate text-sm">New Update Available!</span>
        </div>
        <a href="#">
          <X className="size-4 shrink-0 text-muted-foreground" stroke={2} />
        </a>
      </div>
      <div className="ml-7 flex gap-4 pt-3 text-sm">
        <a href="#" className="text-blue-700">
          Update
        </a>
        <a href="#" className="text-muted-foreground">
          Ignore
        </a>
      </div>
    </div>
  );
}

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

export default function WithAvatars() {
  return (
    <div
      className="flex w-full items-center justify-between rounded bg-background font-medium shadow-sm ring-1 ring-border sm:w-96"
      aria-live="assertive"
    >
      <a
        href="#"
        className="flex flex-1 gap-4 px-4 py-3 transition hover:bg-primary-foreground"
      >
        <Avatar>
          <AvatarImage src="/avatars/avatar-01.webp" />
        </Avatar>
        <div className="flex flex-col text-sm">
          <span className="truncate">Joey</span>
          <span className="truncate font-normal text-muted-foreground">
            How you doin?
          </span>
        </div>
      </a>
      <a href="#" className="group flex shrink-0 px-4 py-3">
        <X
          className="size-4 shrink-0 text-muted-foreground transition group-hover:text-foreground"
          stroke={2}
        />
      </a>
    </div>
  );
}