Status Locale Switcher

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import {
5  DropdownMenu,
6  DropdownMenuContent,
7  DropdownMenuGroup,
8  DropdownMenuItem,
9  DropdownMenuTrigger,
10} from "@/components/ui/dropdown-menu";
11import { Skeleton } from "@/components/ui/skeleton";
12import { cn } from "@/lib/utils";
13 
14export type StatusLocaleOption = {
15  /** Locale code, e.g. "en", "fr". Rendered uppercase as the trigger label. */
16  value: string;
17  /** Human-readable label shown in the dropdown row. Caller decides language. */
18  label: string;
19};
20 
21/**
22 * StatusLocaleSwitcher — agnostic locale picker.
23 *
24 * Pure presentation: caller owns `value`, `onValueChange`, and label resolution.
25 * No `next-intl`, no router, no locale detection. Renders nothing when
26 * `locales.length <= 1` so callers can mount it unconditionally.
27 */
28export function StatusLocaleSwitcher({
29  value,
30  onValueChange,
31  locales,
32  disabled,
33  className,
34  ...props
35}: Omit<
36  React.ComponentProps<typeof DropdownMenuTrigger>,
37  "value" | "onValueChange"
38> & {
39  value: string;
40  onValueChange: (value: string) => void;
41  locales: StatusLocaleOption[];
42  disabled?: boolean;
43}) {
44  if (locales.length <= 1) return null;
45 
46  return (
47    <DropdownMenu>
48      <DropdownMenuTrigger className={cn(className)} asChild {...props}>
49        <Button
50          data-slot="status-locale-switcher"
51          variant="ghost"
52          size="icon"
53          disabled={disabled}
54          className="font-mono uppercase"
55        >
56          {value}
57        </Button>
58      </DropdownMenuTrigger>
59      <DropdownMenuContent align="end" alignOffset={-4}>
60        <DropdownMenuGroup>
61          {locales.map((locale) => (
62            <DropdownMenuItem
63              data-slot="status-locale-switcher-item"
64              key={locale.value}
65              onClick={() => onValueChange(locale.value)}
66            >
67              {locale.label}{" "}
68              <span
69                className={cn(
70                  "ml-auto font-mono uppercase",
71                  locale.value === value
72                    ? "text-foreground"
73                    : "text-muted-foreground",
74                )}
75              >
76                {locale.value}
77              </span>
78            </DropdownMenuItem>
79          ))}
80        </DropdownMenuGroup>
81      </DropdownMenuContent>
82    </DropdownMenu>
83  );
84}
85 
86/**
87 * StatusLocaleSwitcherSkeleton — same footprint as the trigger button.
88 * Render while the active locale isn't known yet (e.g. before next-intl
89// … truncated