Notification preferences

"use client";
import * as React from "react";
import { type NotifyChannel, type NotifyGroup, type NotifyPrefs, NotificationPrefs } from "@/components/ui/notchset/blocks/notification-prefs";

const GROUPS: NotifyGroup[] = [
  { key: "deals", label: "Deals", all: "every deal", mine: "deals you own", events: [
    { key: "assigned", label: "Assigned to you", hint: "A deal or company becomes yours" },
    { key: "stage", label: "Moves stage", hint: "On deals you own or follow" },
    { key: "quiet", label: "Goes quiet", hint: "No email, call or meeting for 14 days" },
    { key: "close", label: "Close date passes", hint: "Still open the day after" },
  ] },
  { key: "conversations", label: "Conversations", all: "every conversation", mine: "your threads and mentions", events: [
    { key: "mentions", label: "Mentions and replies", hint: "Someone writes @Maya in a note" },
    { key: "replies", label: "A contact replies", hint: "To an email you sent from Notchset" },
  ] },
  { key: "work", label: "Work", all: "the team’s work", mine: "work handed to you", events: [
    { key: "task", label: "Task assigned" },
    { key: "approval", label: "Approval requested", hint: "A discount over your limit" },
  ] },
];
const CHANNELS: NotifyChannel[] = [
  { key: "inbox", label: "Inbox", always: true },
  { key: "email", label: "Email", to: "maya@notchset.com", summary: true },
  { key: "push", label: "Push", to: "iPhone 15", waits: true },
  { key: "slack", label: "Slack", to: "#sales-maya", waits: true },
];
const START: NotifyPrefs = {
  scope: { deals: "mine", conversations: "all", work: "mine" },
  channels: {
    assigned: ["email", "push", "slack"], stage: ["email"], quiet: ["email", "push"], close: ["email", "push", "slack"],
    mentions: ["email", "push", "slack"], replies: ["email"], task: ["email", "push"], approval: ["email", "push"],
  },
  summary: { on: true, at: "08:30" },
  quiet: { on: true, from: "19:00", to: "07:30" },
};

export default function NotificationPrefsDemo() {
  const [prefs, setPrefs] = React.useState(START);
  return <NotificationPrefs className="w-full" groups={GROUPS} channels={CHANNELS} value={prefs} onChange={setPrefs} />;
}