Activity composer

"use client";
import * as React from "react";
import { Mail, Phone, StickyNote } from "lucide-react";
import { ActivityComposer } from "@/components/ui/notchset/blocks/activity-composer";
import { SegmentedControl } from "@/components/ui/notchset/segmented-control";

type Kind = "note" | "call" | "email";
const KINDS = [
  { value: "note" as const, label: "Note", icon: <StickyNote />, placeholder: "Write a note about Airtable…" },
  { value: "call" as const, label: "Call", icon: <Phone />, placeholder: "What was said on the call?" },
  { value: "email" as const, label: "Email", icon: <Mail />, placeholder: "Log an email you sent elsewhere" },
];

export default function ActivityComposerDemo() {
  const [kind, setKind] = React.useState<Kind>("note");
  const [outcome, setOutcome] = React.useState<"connected" | "voicemail" | "noanswer">("connected");
  const [logged, setLogged] = React.useState<string[]>([]);
  return (
    <div className="flex w-full max-w-[640px] flex-col gap-3">
      <ActivityComposer
        kinds={KINDS}
        kind={kind}
        onKindChange={setKind}
        audience="Visible to the Airtable deal team"
        extra={
          kind === "call" ? (
            <SegmentedControl
              label="How the call went"
              size="sm"
              value={outcome}
              onValueChange={setOutcome}
              options={[
                { value: "connected", label: "Connected" },
                { value: "voicemail", label: "Voicemail" },
                { value: "noanswer", label: "No answer" },
              ]}
            />
          ) : undefined
        }
        onPost={(k, text) => setLogged((l) => [`${k}: ${text}`, ...l])}
      />
      {logged.map((l) => (
        <span key={l} className="text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">
          Logged {l}
        </span>
      ))}
    </div>
  );
}