IRTH-2/client/src/components/complexWingPage/FloorSidebar/EastWingHighlighting.tsx

interface EastWingHighlightingProps {
  handleOnMouseOut:
    | (() => void)
    | ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void);
  handleOnMouseOver: (
    event: React.MouseEvent<SVGSVGElement, MouseEvent>
  ) => void;
  handleOnApartmentClick: (
    e: React.MouseEvent<SVGSVGElement, MouseEvent>
  ) => void;
}

const EastWingHighlighting = ({
  handleOnMouseOut,
  handleOnMouseOver,
  handleOnApartmentClick,
}: EastWingHighlightingProps) => {
  return (
    <>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="672"
        height="280"
        fill="none"
        viewBox="0 0 672 280"
      >
        <svg
          data-type="Studio Squared-Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={38}
          x={215}
          width="44"
          height="106"
          viewBox="0 0 44 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M42.3823 24.9009H0.359375V97.8101H7.9572V105.272H22.6334H34.8467H37.109V100.705H43.7573V79.9505H42.3823V24.9009Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M0.359375 0.260742V24.2741H36.4415V0.260742H0.359375Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="1 BR U1 Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={38}
          x={260}
          width="79"
          height="106"
          viewBox="0 0 79 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12.5613 27.1557V0.260742H64.7246V27.1557H12.5613Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M40.135 105.272H42.9899H55.4758H71.5709V100.831H78.1781V27.7953H0.601562V69.6856H6.50497V87.2022H40.135V105.272Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="Studio Squared-Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={40}
          x={342}
          width="45"
          height="106"
          viewBox="0 0 45 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.46074 105.272H7.77297H20.0741H34.5026V97.8198H44.2163V79.9546H42.7182V24.8632H0.527344V100.831H5.46074V105.272Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M44.2343 24.3467V0.260742H6.2179V24.3467H44.2343Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="Studio Squared-Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={40}
          x={388}
          width="44"
          height="106"
          viewBox="0 0 44 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0.561732 24.3467V0.260742H38.6071V24.3467H0.561732Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M9.94651 105.272H24.5738H36.8158H39.0738V100.809H43.9301V24.8632H2.1926V79.9546H0.431641V97.8198H9.94651V105.272Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="1 BR Squared-C Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={40}
          x={432}
          width="71"
          height="106"
          viewBox="0 0 71 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.02476 105.272H21.006H33.2654H36.0836V96.3415H70.4738V79.9445H68.4842V24.8632C68.4842 24.7534 23.0364 24.8175 0.3125 24.8632V100.809H7.02476V105.272Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M5.97511 24.3467V0.260742H64.7066V24.3467H5.97511Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="1 BR Squared-C Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={40}
          x={505}
          width="73"
          height="106"
          viewBox="0 0 73 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6.13354 24.3467V0.260742H65.0465V24.3467H6.13354Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M34.759 105.272H37.4603H49.7081H63.7972V100.747H72.0123V79.9445H70.5538V24.8632H2.27054V79.9445H0.451172V96.3415H34.759V105.272Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="1 BR Squared-C Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={168}
          x={435}
          width="71"
          height="106"
          viewBox="0 0 71 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20.9668 0.661621H6.96945V5.32833H0.261719V80.9172H68.4544V34.4298H70.3789V9.7041H36.3524V0.661621H33.3042H20.9668Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M6.1191 81.578V105.836H64.6981V81.578H6.1191Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="Studio Squared-Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={168}
          x={387}
          width="44"
          height="106"
          viewBox="0 0 44 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0.499184 105.836V81.578H38.5893V105.836H0.499184Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M24.5502 0.661621H9.83178V8.07267H0.457031V25.9785H2.14908V80.9172H43.9965V5.32833H39.038V0.661621H36.8668H24.5502Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="Studio Squared-Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={170}
          x={342}
          width="45"
          height="106"
          viewBox="0 0 45 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.84464 0.661621H5.47846V5.3367H0.5625V80.9172H42.7255V25.9785H44.144V8.07267H34.6755V0.661621H19.9571H7.84464Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M6.26025 81.578V105.836H44.1438V81.578H6.26025Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="Studio Squared-Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={169}
          x={298}
          width="43"
          height="106"
          viewBox="0 0 43 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0.277344 81.578V105.836H36.6695V81.578H0.277344Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M22.5797 0.661621H8.23243V7.98497H0.277344V80.9172H42.2V5.3367H37.265V0.661621H35.0572H22.5797Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="Studio Squared-Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={169}
          x={255}
          width="42"
          height="106"
          viewBox="0 0 42 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.64475 0.661621H5.31482V5.3367H0.339844V80.9172H41.9907V7.98497H34.5503V0.661621H20.1009H7.64475Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M5.8841 81.578V105.836H41.9907V81.578H5.8841Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="1 BR Squared-C Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          x={75}
          y={168}
          width="71"
          height="106"
          viewBox="0 0 71 106"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M38.0132 0.661621H35.0456V9.66792H0.753906V25.983H2.51649V80.9811H70.932V5.34202H64.4125V0.661621H50.3588H38.0132Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
          <path
            d="M65.2246 105.844V81.6648H6.6537V105.844H65.2246Z"
            fill="#00BED7"
            fillOpacity="0.2"
          />
        </svg>

        <svg
          data-type="1 BR Squared-C Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          xmlns="http://www.w3.org/2000/svg"
          y={168}
          x={2}
          width="71"
          height="106"
          fill="none"
          viewBox="0 0 71 106"
        >
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            d="M7.344 5.342c0-.198-4.45-.082-6.676 0v75.64h68.289V25.982h1.758V9.668H36.556V.683H21.503c0-.124-9.44-.051-14.159 0v4.659zM6.305 81.794H65.17v24.05H6.305v-24.05z"
          ></path>
        </svg>
        <svg
          data-type="2 BR Squared-A Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          xmlns="http://www.w3.org/2000/svg"
          y={8.94}
          x={100.12}
          width="116"
          height="136"
          fill="none"
          viewBox="0 0 116 136"
        >
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            d="M29.82 66.993l3.874 3.874 28.864-29.093-3.722-3.993L29.82 66.993z"
          ></path>
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            fillRule="evenodd"
            d="M.123 46.739l7.559 7.405-5.387 5.61 67.537 67.513v7.842h15.651v-7.299h26.13v-3.193h3.512V61.745h-30.77l-24.789-25.11 5.234-5.58-15.107-15.16-9.099-9.687L.123 46.738zm33.57 24.128l-3.873-3.874L58.836 37.78l3.722 3.993-28.864 29.093z"
            clipRule="evenodd"
          ></path>
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            d="M115.125 30.26h-3.781a40.718 40.718 0 01-28.515-11.65L64.8.921 50.244 15.348l15.493 15.707-5.15 5.58 24.037 24.306h30.502V30.26z"
          ></path>
        </svg>
        <svg
          data-type="1 BR U1 Left"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={40.26}
          x={580.27}
          xmlns="http://www.w3.org/2000/svg"
          width="91"
          height="106"
          fill="none"
          viewBox="0 0 91 106"
        >
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            d="M7.439 31.683V.26h77.623a5.22 5.22 0 015.192 5.765L83.15 73.733a4.176 4.176 0 01-4.153 3.74h-3.315v-45.79H7.44z"
          ></path>
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            d="M8.525 105.272h53.067v-3.992h10.89V82.87H68.87V41.562h6.055v-9.45H2.121v47.833H.266v20.802h8.259v4.525z"
          ></path>
        </svg>
        <svg
          data-type="1 BR U1 Right"
          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
          onMouseOut={handleOnMouseOut}
          onMouseOver={handleOnMouseOver}
          onClick={handleOnApartmentClick}
          y={168.26}
          x={580}
          xmlns="http://www.w3.org/2000/svg"
          width="89"
          height="106"
          fill="none"
          viewBox="0 0 89 106"
        >
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            d="M18.27.662H6.546v4.666H.262v69.043h73.382V64.289h-6.55V23.126h3.422V4.792H59.593V.662H18.27z"
          ></path>
          <path
            fill="#00BED7"
            fillOpacity="0.2"
            d="M75.398 75.868H5.453v29.893h77.519a5.22 5.22 0 005.192-5.763l-7.01-67.103a5.22 5.22 0 00-5.191-4.678h-.565v47.65z"
          ></path>
        </svg>
      </svg>
    </>
  );
};

export default EastWingHighlighting;