Status Blank States

1"use client";
2 
3import { useStatusBlocksLabels } from "@/components/blocks/status-i18n";
4import { cn } from "@/lib/utils";
5 
6// ============================================================================
7// Container Components
8// ============================================================================
9 
10/**
11 * StatusBlankContainer - Main container for empty state displays
12 *
13 * Provides a centered, bordered container with muted background for displaying
14 * empty state content. The container is responsive with adaptive padding
15 * (sm:px-8 sm:py-6) and uses flexbox for vertical centering of content.
16 *
17 * @example
18 * ```tsx
19 * <StatusBlankContainer>
20 *   <StatusBlankTitle>No Data Available</StatusBlankTitle>
21 *   <StatusBlankDescription>Add monitors to see data here</StatusBlankDescription>
22 * </StatusBlankContainer>
23 * ```
24 *
25 * @see StatusBlankTitle - For heading text
26 * @see StatusBlankDescription - For descriptive text
27 */
28export function StatusBlankContainer({
29  children,
30  className,
31  ...props
32}: React.ComponentProps<"div">) {
33  return (
34    <div
35      className={cn(
36        "bg-muted/30 flex flex-col items-center justify-center gap-2.5 rounded-lg border px-3 py-2 text-center sm:px-8 sm:py-6",
37        className,
38      )}
39      {...props}
40    >
41      {children}
42    </div>
43  );
44}
45 
46// ============================================================================
47// Text Components
48// ============================================================================
49 
50/**
51 * StatusBlankTitle - Title text for empty state displays
52 *
53 * Displays medium-weight title text within empty state containers.
54 * Typically used to communicate the empty state condition.
55 *
56 * @example
57 * ```tsx
58 * <StatusBlankTitle>No monitors found</StatusBlankTitle>
59 * ```
60 *
61 * @see StatusBlankDescription - For additional descriptive text
62 */
63export function StatusBlankTitle({
64  children,
65  className,
66  ...props
67}: React.ComponentProps<"div">) {
68  return (
69    <div className={cn("font-medium", className)} {...props}>
70      {children}
71    </div>
72  );
73}
74 
75/**
76 * StatusBlankDescription - Descriptive text for empty state displays
77 *
78 * Displays muted, monospaced text providing additional context or guidance
79 * for the empty state. The monospace font helps distinguish it as secondary
80 * instructional text.
81 *
82 * @example
83 * ```tsx
84 * <StatusBlankDescription>
85 *   Add monitors to this page to see their status here
86 * </StatusBlankDescription>
87 * ```
88 *
89// … truncated