React x Tailwind Grid Overlay

debug.jsx

import React from 'react';

import clsx from 'clsx';

const availableGridClassnames = [
  'grid-cols-1',
  'grid-cols-2',
  'grid-cols-3',
  'grid-cols-4',
  'grid-cols-5',
  'grid-cols-6',
  'grid-cols-7',
  'grid-cols-8',
  'grid-cols-9',
  'grid-cols-10',
  'grid-cols-11',
  'grid-cols-12',
];

const availableGapClassnames = [
  'gap-0',
  'gap-px',
  'gap-0.5',
  'gap-1',
  'gap-1.5',
  'gap-2',
  'gap-2.5',
  'gap-3',
  'gap-3.5',
  'gap-4',
  'gap-5',
  'gap-6',
  'gap-7',
  'gap-8',
  'gap-9',
  'gap-10',
  'gap-11',
  'gap-12',
  'gap-14',
  'gap-16',
  'gap-20',
  'gap-24',
  'gap-28',
  'gap-32',
];

export default function GridDebug() {
  const [show, setShow] = React.useState(false);

  const [gridColClassname, setGridColClassname] = React.useState(
    availableGridClassnames.at(-1)
  );
  const [gapClassname, setGapClassname] = React.useState(
    availableGapClassnames.at(13)
  );

  const cols = React.useMemo(
    () =>
      gridColClassname
        ? availableGridClassnames.indexOf(gridColClassname) + 1
        : 0,

    [gridColClassname]
  );

  const keyPressHandler = (e: KeyboardEvent) => {
    if (e.ctrlKey && e.key === 'g') {
      setShow((s) => !s);
    }
  };

  React.useEffect(() => {
    document.addEventListener('keypress', keyPressHandler);

    return () => {
      document.removeEventListener('keypress', keyPressHandler);
    };
  }, []);

  if (!show) {
    return null;
  }

  return (
    <React.Fragment>
      <section className="fixed top-0" style={{ zIndex: 999999 }}>
        <div className="fixed inset-x-0 top-0 z-50 flex justify-center">
          <div className="flex bg-red-500 px-4 py-2 text-xs font-bold text-white">
            <div>Breakpoint:&nbsp;</div>
            <div className="xs:block hidden sm:hidden">xs</div>
            <div className="hidden sm:block md:hidden">sm</div>
            <div className="hidden md:block lg:hidden">md</div>
            <div className="hidden lg:block xl:hidden">lg</div>
            <div className="hidden xl:block 2xl:hidden">xl</div>
            <div className="hidden 2xl:block">2xl</div>
          </div>

          <div className="flex bg-red-500 px-4 py-2">
            <div className="text-xs font-bold text-white">Columns:&nbsp;</div>
            <select
              value={gridColClassname}
              onChange={(e) => setGridColClassname(e.target.value)}
            >
              {availableGridClassnames.map((cn) => (
                <option key={cn} value={cn}>
                  {cn}
                </option>
              ))}
            </select>
          </div>

          <div className="flex bg-red-500 px-4 py-2">
            <div className="text-xs font-bold text-white">Gap:&nbsp;</div>
            <select
              value={gapClassname}
              onChange={(e) => setGapClassname(e.target.value)}
            >
              {availableGapClassnames.map((cn) => (
                <option key={cn} value={cn}>
                  {cn}
                </option>
              ))}
            </select>
          </div>
        </div>
      </section>

      <section
        className="pointer-events-none fixed inset-0"
        style={{ zIndex: 999998 }}
      >
        <div className="container">
          <div className={clsx('grid', gridColClassname, gapClassname)}>
            {Array.from(Array(cols).keys()).map((c) => (
              <div
                key={`col-${c}`}
                className="flex h-screen items-center justify-center bg-red-300 bg-opacity-25 font-bold text-red-900"
              >
                {c + 1}
              </div>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}