Breakpoint Overlay

breakpoints.tsx

'use client';

import { useEffect, useState } from 'react';

import { Button, Tooltip } from '@polylink/ui';

import { isDevelopment } from '~/utils/helpers';

export function Responsive() {
  // Add window size tracking for debugging
  const [windowWidth, setWindowWidth] = useState<number>(0);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    // Set initial width
    handleResize();

    // Add event listener
    window.addEventListener('resize', handleResize);

    // Clean up
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (isDevelopment) {
    return (
      <div className="padding-1 fixed bottom-4 right-4 z-50 w-fit opacity-50">
        {/* Show current window width for debugging */}
        <Tooltip
          content={`${windowWidth} px`}
          radius="sm"
        >
          <div className="space-x-1">
            <Button
              isIconOnly
              radius="full"
              className="block font-bold md:hidden lg:hidden xl:hidden 2xl:hidden"
            >
              sm
            </Button>
            <Button
              isIconOnly
              radius="full"
              className="hidden font-bold md:block lg:hidden xl:hidden 2xl:hidden"
            >
              md
            </Button>
            <Button
              isIconOnly
              radius="full"
              className="hidden font-bold md:hidden lg:block xl:hidden 2xl:hidden"
            >
              lg
            </Button>
            <Button
              isIconOnly
              radius="full"
              className="hidden font-bold md:hidden lg:hidden xl:block 2xl:hidden"
            >
              xl
            </Button>
            <Button
              isIconOnly
              radius="full"
              className="hidden font-bold md:hidden lg:hidden xl:hidden 2xl:block"
            >
              2xl
            </Button>
          </div>
        </Tooltip>
      </div>
    );
  }
  return null;
}