Breakpoint Display

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7 
8const breakpointDisplayVariants = cva(
9  "pointer-events-none select-none bg-foreground text-background px-2 py-1 z-50 rounded-b",
10  {
11    variants: {
12      position: {
13        fixed: "fixed top-0 right-[50%] translate-x-1/2",
14        relative: "relative",
15        absolute: "absolute top-0 right-[50%] translate-x-1/2",
16      },
17    },
18    defaultVariants: {
19      position: "fixed",
20    },
21  },
22)
23 
24// Canonical ordering of breakpoints from smallest to largest
25// This defines the semantic order - actual pixel values are defined in Tailwind config
26const BREAKPOINT_ORDER = ["xxs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const
27 
28type BreakpointKey = (typeof BREAKPOINT_ORDER)[number]
29 
30// Map breakpoint keys to their display labels
31const BREAKPOINT_LABELS: Record<BreakpointKey, string> = {
32  xxs: "XXS",
33  xs: "XS",
34  sm: "SM",
35  md: "MD",
36  lg: "LG",
37  xl: "XL",
38  "2xl": "2XL",
39  "3xl": "3XL",
40}
41 
42// Default Tailwind breakpoints (standard v3/v4)
43const DEFAULT_BREAKPOINTS: BreakpointKey[] = ["sm", "md", "lg", "xl", "2xl"]
44 
45interface BreakpointDisplayProps
46  extends React.HTMLAttributes<HTMLDivElement>,
47    VariantProps<typeof breakpointDisplayVariants> {
48  /**
49   * Additional breakpoints to include beyond the default Tailwind breakpoints.
50   * These will be automatically sorted by semantic order (xxs < xs < sm < md < lg < xl < 2xl < 3xl).
51   * Actual pixel values are defined in your Tailwind configuration.
52   * @example extraBreakpoints={["xxs", "xs", "3xl"]}
53   */
54  extraBreakpoints?: BreakpointKey[]
55}
56 
57function BreakpointDisplay({ className, position, extraBreakpoints = [], ...props }: BreakpointDisplayProps) {
58  // Combine default and extra breakpoints, remove duplicates, and sort by semantic order
59  const activeBreakpoints = React.useMemo(() => {
60    const combined = [...DEFAULT_BREAKPOINTS, ...extraBreakpoints]
61    const unique = Array.from(new Set(combined))
62 
63    // Sort by their position in the canonical BREAKPOINT_ORDER array
64    return unique.sort((a, b) => {
65      return BREAKPOINT_ORDER.indexOf(a) - BREAKPOINT_ORDER.indexOf(b)
66    })
67  }, [extraBreakpoints])
68 
69  // Create a Set for O(1) lookup
70  const activeSet = React.useMemo(() => new Set(activeBreakpoints), [activeBreakpoints])
71 
72  // Determine the first and last active breakpoints
73  const firstBreakpoint = activeBreakpoints[0]
74// … truncated