Status Updates

1"use client";
2 
3import { useStatusBlocksLabels } from "@/components/blocks/status-i18n";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/ui/popover";
11import { Separator } from "@/components/ui/separator";
12import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
13import { cn } from "@/lib/utils";
14import { Check, Copy } from "lucide-react";
15 
16/**
17 * StatusUpdates — popover root for "Get updates" controls.
18 *
19 * Flat exports. Compose `StatusUpdatesTrigger` + `StatusUpdatesContent` and
20 * pick whichever channel children apply (`StatusUpdatesRss`,
21 * `StatusUpdatesJson`, `StatusUpdatesSlack`, `StatusUpdatesSsh`, or your own
22 * email form). The block does not enforce a tab structure — callers wrap
23 * children with `Tabs` themselves if needed.
24 */
25export function StatusUpdates({
26  children,
27  ...props
28}: React.ComponentProps<typeof Popover>) {
29  return <Popover {...props}>{children}</Popover>;
30}
31 
32export function StatusUpdatesTrigger({
33  children,
34  className,
35  ...props
36}: React.ComponentProps<typeof Button>) {
37  const labels = useStatusBlocksLabels();
38  return (
39    <PopoverTrigger asChild>
40      <Button
41        data-slot="status-updates-trigger"
42        size="sm"
43        variant="outline"
44        className={cn(className)}
45        {...props}
46      >
47        {children ?? labels.subscribe}
48      </Button>
49    </PopoverTrigger>
50  );
51}
52 
53export function StatusUpdatesContent({
54  className,
55  ...props
56}: React.ComponentProps<typeof PopoverContent>) {
57  return (
58    <PopoverContent
59      data-slot="status-updates-content"
60      align="end"
61      className={cn("w-80 overflow-hidden p-0", className)}
62      {...props}
63    />
64  );
65}
66 
67/**
68 * StatusUpdatesSection — single channel description + content slot.
69 * Use to compose custom channels; the built-in `StatusUpdatesRss`/`Json`/
70 * `Slack`/`Ssh` children render this internally.
71 */
72export function StatusUpdatesSection({
73  description,
74  children,
75  className,
76  ...props
77}: React.ComponentProps<"div"> & {
78  description?: React.ReactNode;
79}) {
80  return (
81    <div
82      data-slot="status-updates-section"
83      className={cn("flex flex-col gap-2 px-2 py-2", className)}
84      {...props}
85    >
86      {description ? <div className="text-sm">{description}</div> : null}
87      {children}
88    </div>
89  );
90}
91 
92export function StatusUpdatesCopyInput({
93  value,
94  className,
95  onClick,
96  ...props
97// … truncated