Status Banner

1"use client";
2 
3import { useStatusBlocksLabels } from "@/components/blocks/status-i18n";
4import { StatusIcon as UnifiedStatusIcon } from "@/components/blocks/status-icon";
5import { StatusTimestamp } from "@/components/blocks/status-timestamp";
6import type { StatusType } from "@/components/blocks/status.types";
7import {
8  Tabs,
9  TabsContent,
10  TabsList,
11  TabsTrigger,
12} from "@/components/ui/tabs";
13import { cn } from "@/lib/utils";
14 
15/**
16 * StatusBanner - Complete banner component with integrated icon, message, and timestamp
17 *
18 * A fully composed banner component that displays a prominent status message with:
19 * - Status-colored icon on the left
20 * - Automatic status message (e.g., "All Systems Operational")
21 * - Current timestamp on the right
22 *
23 * The banner automatically styles itself based on the status type with colored
24 * backgrounds and borders. This is the simplest way to display a status banner
25 * when you don't need custom content.
26 *
27 * For custom banner content, use StatusBannerContainer with manual composition.
28 *
29 * @param status - The status type that determines appearance and message
30 *
31 * @example
32 * ```tsx
33 * <StatusBanner status="success" />
34 * // Displays: [✓ icon] All Systems Operational | Jan 15, 2024 10:30 (UTC)
35 * ```
36 *
37 * @example
38 * ```tsx
39 * <StatusBanner status="degraded" />
40 * // Displays: [⚠ icon] Degraded Performance | Jan 15, 2024 10:30 (UTC)
41 * ```
42 *
43 * @see StatusBannerContainer - For custom banner composition
44 * @see StatusBannerMessage - For the automatic status message
45 * @see StatusTimestamp - For the timestamp display
46 */
47export function StatusBanner({
48  className,
49  status,
50}: React.ComponentProps<"div"> & {
51  status?: Exclude<StatusType, "empty">;
52}) {
53  return (
54    <StatusBannerContainer
55      status={status}
56      className={cn(
57        "flex items-center gap-3 px-3 py-2 sm:px-4 sm:py-3",
58        "data-[status=success]:bg-success/20",
59        "data-[status=degraded]:bg-warning/20",
60        "data-[status=error]:bg-destructive/20",
61        "data-[status=info]:bg-info/20",
62        className,
63      )}
64    >
65      <StatusBannerIcon className="flex-shrink-0" />
66      <div className="flex flex-1 flex-wrap items-center justify-between gap-2">
67        <StatusBannerMessage className="text-xl font-semibold" />
68        <StatusTimestamp date={new Date()} className="text-xs" />
69      </div>
70    </StatusBannerContainer>
71  );
72}
73StatusBanner.displayName = "StatusBanner";
74 
75/**
76// … truncated