new.tsx

.cells div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}


import Link from "next/link";
import { ChangeEvent, useCallback, useState } from "react";

import { Header } from "../../components/Header";
import { Main } from "../../components/Main";
import { Nav } from "../../components/Nav";

export default () => {
  const [lights, setLights] = useState(Array(176).fill("#f9fafb"));
  const [active, setActive] = useState(0);
  const [, updateState] = useState();
  const forceUpdate = useCallback(() => updateState({}), []);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    let newLights = lights;
    newLights[active] = e.target.value;
    setLights(newLights);
    forceUpdate();
  };

  return (
    <>
      <Nav />
      <Header title="Create a Board" />
      <Main>
        <div className="grid lg:grid-cols-2 gap-4 min-h-0 min-w-0">
          <div>
            <div className="bg-white shadow overflow-hidden sm:rounded-lg">
              <div className="px-4 py-5 border-b border-gray-200 sm:px-6">
                <h3 className="text-lg leading-6 font-medium text-gray-900">
                  Basic Information
                </h3>
                <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
                  Basic details and information.
                </p>
              </div>
              <div className="px-4 sm:px-6">
                <label
                  htmlFor="name"
                  className="mt-5 block text-sm leading-5 font-medium text-gray-700"
                >
                  Name
                </label>
                <div className="mt-2 relative rounded-md shadow-sm">
                  <input
                    id="name"
                    className="form-input block w-full sm:text-sm sm:leading-5"
                    placeholder="Your amazing wall"
                  />
                </div>

                <label
                  htmlFor="creator"
                  className="mt-5 block text-sm leading-5 font-medium text-gray-700"
                >
                  Creator
                </label>
                <div className="mt-2 relative rounded-md shadow-sm">
                  <input
                    id="creator"
                    className="form-input block w-full sm:text-sm sm:leading-5"
                    placeholder="Sophie"
                  />
                </div>

                <div className="mt-6 mb-5">
                  <button
                    type="submit"
                    className="w-full flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"
                  >
                    Save
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white shadow overflow-hidden sm:rounded-lg min-h-0 min-w-0">
            <div className="px-4 py-5 border-b border-gray-200 sm:px-6">
              <h3 className="text-lg leading-6 font-medium text-gray-900">
                Light Creator
              </h3>
              <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
                Setup your lights here.{" "}
                {lights.filter((light) => light !== "#f9fafb").length} / 176
                filled (
                {(
                  (lights.filter((light) => light !== "#f9fafb").length / 176) *
                  100
                ).toPrecision(4)}
                %)
              </p>
            </div>
            <div className="px-4 py-5 sm:px-6">
              <div className="grid cells grid-cols-11 gap-2">
                {lights.map((light, index) => (
                  <div
                    key={index}
                    className={`rounded-lg relative border ${
                      active === index && "shadow-outline"
                    }`}
                    style={{ backgroundColor: light }}
                  >
                    <input
                      onClick={() => setActive(index)}
                      value={light}
                      onChange={handleChange}
                      type="color"
                      className="absolute top-0 w-full h-full cursor-pointer"
                      style={{ opacity: 0 }}
                    />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Main>
    </>
  );
};