Notch island

"use client";
import * as React from "react";
import { Check, FileUp, Phone, PhoneOff } from "lucide-react";
import { NotchIsland, type IslandMoment } from "@/components/ui/notchset/blocks/notch-island";
import { Avatar } from "@/components/ui/notchset/avatar";

const round = (bg: string, icon: React.ReactNode, label: string) => (
  <span role="img" aria-label={label} className={`grid size-8 place-items-center rounded-full ${bg} [&_svg]:size-4`}>
    {icon}
  </span>
);

export default function NotchIslandDemo() {
  const [at, setAt] = React.useState("call");
  const [pct, setPct] = React.useState(0);
  /* the upload really goes up, then lands as done */
  React.useEffect(() => {
    if (at !== "upload") return;
    const t = setInterval(() => setPct((p) => Math.min(1, p + 0.06)), 140);
    return () => clearInterval(t);
  }, [at]);
  React.useEffect(() => {
    if (at !== "upload" || pct < 1) return;
    const t = setTimeout(() => setAt("done"), 420);
    return () => clearTimeout(t);
  }, [at, pct]);
  const moments: IslandMoment[] = [
    { key: "rest", label: "Quiet", size: "rest" },
    {
      key: "call",
      label: "Call",
      size: "wide",
      lead: <Avatar name="Ana Ruiz" size={32} />,
      title: "Ana Ruiz",
      detail: "Discovery call",
      trail: (
        <span className="flex gap-2 text-white">
          {round("bg-[var(--ns-bad)]", <PhoneOff />, "Decline")}
          {round("bg-[var(--ns-ok)]", <Phone />, "Answer")}
        </span>
      ),
    },
    {
      key: "upload",
      label: "Upload",
      size: "tall",
      lead: (
        <span className="grid size-9 place-items-center rounded-[10px] bg-white/10 [&_svg]:size-4">
          <FileUp />
        </span>
      ),
      title: "Q4 pricing deck.pdf",
      detail: `${Math.round(pct * 100)}% · to Stripe`,
      progress: pct,
    },
    {
      key: "done",
      label: "Done",
      size: "wide",
      lead: (
        <span className="grid size-8 place-items-center rounded-full bg-[var(--ns-ok)] text-white [&_svg]:size-4">
          <Check />
        </span>
      ),
      title: "Sent to Stripe",
      detail: "Priya will see it in her inbox",
    },
  ];
  return (
    <NotchIsland
      moments={moments}
      value={at}
      onValueChange={(k) => {
        if (k === "upload") setPct(0.08);
        setAt(k);
      }}
    />
  );
}