Status Page Get-in-Touch

1"use client";
2 
3import { useStatusBlocksLabels } from "@/components/blocks/status-i18n";
4import { Button } from "@/components/ui/button";
5import {
6  Tooltip,
7  TooltipContent,
8  TooltipProvider,
9  TooltipTrigger,
10} from "@/components/ui/tooltip";
11import { cn } from "@/lib/utils";
12 
13/**
14 * StatusPageGetInTouchIcon — ghost icon button with tooltip chrome.
15 *
16 * Pass the link element (with href + target + icon + sr-only label) as
17 * children; the block layers Button styling, asChild Slot, and the tooltip.
18 * Wraps in its own TooltipProvider so it's safe to mount anywhere.
19 */
20export function StatusPageGetInTouchIcon({
21  className,
22  children,
23  ...props
24}: React.ComponentProps<typeof Button>) {
25  const labels = useStatusBlocksLabels();
26  return (
27    <TooltipProvider>
28      <Tooltip>
29        <TooltipTrigger asChild>
30          <Button
31            data-slot="status-page-get-in-touch-icon"
32            variant="ghost"
33            size="icon"
34            type="button"
35            className={cn("size-8", className)}
36            asChild
37            {...props}
38          >
39            {children}
40          </Button>
41        </TooltipTrigger>
42        <TooltipContent>
43          <p>{labels.getInTouch}</p>
44        </TooltipContent>
45      </Tooltip>
46    </TooltipProvider>
47  );
48}
49 
50/**
51 * StatusPageGetInTouchButton — outlined text-label button.
52 *
53 * Pass the link element (with href + target) as children; the block layers
54 * Button styling and asChild Slot. Default label is `labels.getInTouch` —
55 * the caller's link content overrides it if they pass children with text.
56 */
57export function StatusPageGetInTouchButton({
58  className,
59  ...props
60}: React.ComponentProps<typeof Button>) {
61  return (
62    <Button
63      data-slot="status-page-get-in-touch-button"
64      variant="outline"
65      size="sm"
66      type="button"
67      className={className}
68      asChild
69      {...props}
70    />
71  );
72}