React Tailwind css responsive display helper component

responsive.tsx

import { cn } from "@/lib/utils";

interface ResponsiveProps {
  children: React.ReactNode;
  className?: string;
}

interface BreakpointProps extends ResponsiveProps {
  show?: "sm" | "md" | "lg" | "xl" | "2xl";
  hide?: "sm" | "md" | "lg" | "xl" | "2xl";
}

/**
 * Show content only on mobile (< 640px)
 * Pure CSS solution - no JavaScript hydration needed
 */
export const MobileOnly = ({ children, className }: ResponsiveProps) => {
  return <div className={cn("block sm:hidden", className)}>{children}</div>;
};

/**
 * Hide content on mobile (< 640px)
 * Pure CSS solution - no JavaScript hydration needed
 */
export const MobileHidden = ({ children, className }: ResponsiveProps) => {
  return <div className={cn("hidden sm:block", className)}>{children}</div>;
};

/**
 * Show content only on tablet (640px - 1023px)
 * Pure CSS solution - no JavaScript hydration needed
 */
export const TabletOnly = ({ children, className }: ResponsiveProps) => {
  return (
    <div className={cn("hidden sm:block lg:hidden", className)}>{children}</div>
  );
};

/**
 * Show content only on desktop (>= 1024px)
 * Pure CSS solution - no JavaScript hydration needed
 */
export const DesktopOnly = ({ children, className }: ResponsiveProps) => {
  return <div className={cn("hidden lg:block", className)}>{children}</div>;
};
/**
 * Flexible responsive component with show/hide breakpoints
 * Pure CSS solution - no JavaScript hydration needed
 *
 * @param show - Show from this breakpoint and up
 * @param hide - Hide from this breakpoint and up
 *
 * Examples:
 * <Responsive show="md">Content visible from medium screens up</Responsive>
 * <Responsive hide="lg">Content hidden from large screens up</Responsive>
 * <Responsive show="sm" hide="xl">Content visible from small to extra-large</Responsive>
 */
export const Responsive = ({
  children,
  className,
  show,
  hide,
}: BreakpointProps) => {
  const showClass = show
    ? {
        sm: "hidden sm:block",
        md: "hidden md:block",
        lg: "hidden lg:block",
        xl: "hidden xl:block",
        "2xl": "hidden 2xl:block",
      }[show]
    : "block";

  const hideClass = hide
    ? {
        sm: "sm:hidden",
        md: "md:hidden",
        lg: "lg:hidden",
        xl: "xl:hidden",
        "2xl": "2xl:hidden",
      }[hide]
    : "";

  return <div className={cn(showClass, hideClass, className)}>{children}</div>;
};

/**
 * Common responsive breakpoint combinations
 * All pure CSS - no JavaScript needed
 */
export const ResponsiveBreakpoints = {
  /** Mobile only (< 640px) */
  MobileOnly,
  /** Mobile hidden (>= 640px) */
  MobileHidden,
  /** Tablet only (640px - 1023px) */
  TabletOnly,
  /** Desktop only (>= 1024px) */
  DesktopOnly,
  /** Flexible responsive component */
  Responsive,
};