Share this view

"use client";
import * as React from "react";
import { ShareView } from "@/components/ui/notchset/blocks/share-view";
import { Switch } from "@/components/ui/notchset/switch";

const TEAM = [
  { id: "u1", name: "Priya Raman", email: "priya@larkspur.io", hue: 280, sub: "Sales lead" },
  { id: "u2", name: "Omar Haddad", email: "omar@larkspur.io", hue: 160, sub: "Account executive" },
  { id: "u3", name: "Kevin Ito", email: "kevin@larkspur.io", hue: 210, sub: "Finance" },
  { id: "u4", name: "Ana Ruiz", email: "ana@larkspur.io", hue: 20, sub: "CEO" },
];

export default function ShareViewDemo() {
  const [fails, setFails] = React.useState(false);
  return (
    <div className="flex w-full max-w-[440px] flex-col gap-3">
      <ShareView
        view="Q4 commit, EMEA"
        link="https://app.example.com/v/q4-commit-emea"
        people={TEAM}
        defaultTo={[TEAM[0]!, TEAM[2]!]}
        access={[
          { value: "team", label: "Team" },
          { value: "invited", label: "Only invited" },
        ]}
        /* resolve false and nobody is told: the panel keeps the people and offers Retry */
        onSend={() => new Promise<boolean>((r) => setTimeout(() => r(!fails), 600))}
      />
      <label className="flex items-center gap-2 self-end text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">
        Sending fails
        <Switch checked={fails} onCheckedChange={setFails} aria-label="Make sending fail" />
      </label>
    </div>
  );
}