IRTH/client/src/components/complexWingPage/FloorSidebar/FloorEastWingHighlighting.tsx

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

function FloorEastWingHighlighting({
  handleOnMouseOut,
  handleOnMouseOver,
  handleOnApartmentClick,
}: FloorEastWingHighlightingProps) {
  return (
    <>
      <svg
        data-type="1 BR Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={40}
        y={1}
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M43.2341 36.4771L32.7082 58.1869L29.3319 56.2506L39.8082 34.7023L43.2341 36.4771Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M28.5005 74.2294L42.5381 81.1479L50.4314 84.8972L51.9701 85.6403L59.349 70.188L58.1451 69.527L72.3281 41.1009L19.0886 15.0072L8.86602 35.7266L9.918 36.2984L0.275391 55.8072L30.2844 70.6783L28.5005 74.2294ZM43.2341 36.4771L32.7082 58.1869L29.3319 56.2506L39.8082 34.7023L43.2341 36.4771Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M10.0694 32.4059L18.7878 14.1246L63.8107 36.2118L66.1586 31.4119C66.8459 30.0068 66.3551 28.3095 65.0241 27.488L21.9939 0.930965C20.4626 -0.0141451 18.45 0.569992 17.6626 2.1881L5.64879 26.8762C4.91348 28.3873 5.54323 30.2083 7.05493 30.9423L10.0694 32.4059Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="1 BR Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={92}
        y={41}
        width="88"
        height="70"
        viewBox="0 0 88 70"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M37.4333 47.3867L33.7376 45.5513L44.3549 23.5337L47.9879 25.4442L37.4333 47.3867Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M68.3198 47.3867L77.2296 29.0916L31.8335 7.26571C31.9227 7.16484 32.9092 5.19457 34.1722 2.63713C34.8571 1.25035 36.4724 0.59442 37.9286 1.11561L85.5011 18.1418C87.1993 18.7496 87.9983 20.6935 87.2183 22.3198L75.1849 47.4108C74.4431 48.9575 72.5695 49.5849 71.0459 48.7968L68.3198 47.3867Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M0.257812 47.2912L1.7471 48.074L9.88156 52.0272L23.6313 58.775L25.5512 55.0764L55.5352 69.7014L65.1629 49.7968L66.264 50.3332L76.2737 29.4883L22.9254 3.71262L8.73526 32.4366L7.68019 31.8754L0.257812 47.2912ZM37.4333 47.3867L33.7376 45.5513L44.3549 23.5337L47.9879 25.4442L37.4333 47.3867Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={99}
        y={126}
        width="78"
        height="58"
        viewBox="0 0 78 58"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.847656 29.9186V31.905V40.8977V52.7401H4.09539V57.6346H57.5094V0.815186H26.4511V4.85119H13.8386V29.9186H0.847656Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M57.8461 9.22863H77.4339V47.9344H57.8461V9.22863Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={99}
        y={184}
        width="78"
        height="32"
        viewBox="0 0 78 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M77.4339 4.21582H59.9175V31.7744H77.4339V4.21582Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M0.847656 3.83763V5.30536V14.3033V24.9006H6.11339V31.7744H19.2304V30.5131H59.4959V0.116943H4.09539V3.83763H0.847656Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={99}
        y={217}
        width="78"
        height="33"
        viewBox="0 0 78 33"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.847656 7.23569V17.9161V26.8653V28.5971H4.09539V32.0826H59.4959V1.50751H19.2304V0.423796H6.11339V7.23569H0.847656Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M77.4339 0.398926H59.9175V28.0973H77.4339V0.398926Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={99}
        y={251}
        width="78"
        height="58"
        viewBox="0 0 78 58"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M77.4328 10.4467H57.8326V48.5921H77.4328V10.4467Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M0.882812 5.72498V17.467V26.4419V28.6878H13.7973V53.2329H26.3883V57.2601H57.4322V0.816895H4.09427V5.72498H0.882812Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={99}
        y={310}
        width="78"
        height="32"
        viewBox="0 0 78 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M59.9425 5.4146H77.4328V31.695H59.9425V5.4146Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M0.882812 5.03001V6.47548V15.4165V26.1621H6.11227V31.695H59.5172V1.32728H19.1782V0.162598H4.09427V5.03001H0.882812Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="2 BR Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={99}
        y={343}
        width="99"
        height="85"
        viewBox="0 0 99 85"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M50.6968 62.4116L47.8478 59.5627L69.0706 38.3812L72.0021 41.2714L50.6968 62.4116Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M0.882812 21.6152V22.9085V31.96V33.1601H6.50805L55.9408 82.5928L59.9338 78.5999L65.3813 84.0474L94.655 54.7737L76.6019 36.6138L72.5931 40.56L54.5146 22.6064V0.348877H8.54341V2.76417H6.11227V21.6152H0.882812ZM50.6968 62.4116L47.8478 59.5627L69.0706 38.3812L72.0021 41.2714L50.6968 62.4116Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M55.0253 0.348877H77.4328V2.84703C77.4328 10.9119 80.6365 18.6464 86.3392 24.3491L98.8228 36.8326L88.1845 47.4709L76.7404 36.0268L72.5931 40.1742L55.0253 22.6064V0.348877Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="2 BR Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={4.66}
        y={492}
        width="90"
        height="97"
        viewBox="0 0 90 97"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M18.1036 5.09509H0.662109V46.8361H18.1036V5.09509Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M89.5155 19.6333H88.0078H78.9667H77.2382V5.79173H73.8163V0.916504H18.4757V50.221H48.9767V54.6804H55.5607V78.7987H89.5155V19.6333Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M59.227 79.2319V96.211H85.7186V79.2319H59.227Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="1 BR Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={4.63}
        y={439}
        width="78"
        height="52"
        viewBox="0 0 78 52"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M18.1034 4.49092H0.628906V47.2577H18.1034V4.49092Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M77.238 27.2949V25.1743H70.5371V0.437012H50.6172V1.66582H18.4755V51.3945H73.8161V46.4628H77.1584V36.2871L77.238 27.2949Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="1 BR Squared"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={4.63}
        y={387}
        width="78"
        height="52"
        viewBox="0 0 78 52"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.628906 47.7823H18.1034V4.83478H0.628906V47.7823Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M73.8161 0.840332H18.4755V50.7118H50.6172V51.8273H70.5371V26.9096H77.238V24.869V15.8135V5.80208H73.8161V0.840332Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Flex"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        data-apartment="apartments-studio-1"
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={9.06}
        y={279}
        width="73"
        height="29"
        viewBox="0 0 73 29"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16.8529 0.00878906H0.0644531V24.141H16.8529V0.00878906Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M72.2048 24.5692V23.078L72.2363 14.2041V3.60853H66.9374V0.00878906H17.238V28.1512H68.8053V24.5692H72.2048Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Flex"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        data-apartment="apartments-studio-1"
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={9.06}
        y={249}
        width="73"
        height="30"
        viewBox="0 0 73 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16.8529 4.74607H0.0644531V29.3672H16.8529V4.74607Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M17.238 0.731445V29.3672H66.9374V25.8529H72.2363V15.0391V5.94945V4.34722H68.7814V0.731445H17.238Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Flex"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        data-apartment="apartments-studio-1"
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={9.06}
        y={217}
        width="73"
        height="31"
        viewBox="0 0 73 31"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.238 1.41691V30.2271H68.7814V26.5346H72.2363V24.9657V15.9437V3.98155H66.9374V0.365723H49.2652V1.41691H17.238Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M16.8529 0.431123H0.0644531V26.2567H16.8529V1.41691V0.431123Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Flex"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        data-apartment="apartments-studio-1"
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={9.06}
        y={186}
        width="73"
        height="30"
        viewBox="0 0 73 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16.8529 4.13203H0.0644531V29.8606H16.8529V28.5874V4.13203Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M17.238 0.0864258V28.5874H49.2652V29.8341H66.9374V26.2549H72.2363V14.2384V5.51238V3.67383H68.7814V0.0864258H17.238Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Flex"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        data-apartment="apartments-studio-1"
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={9.06}
        y={156}
        width="73"
        height="30"
        viewBox="0 0 73 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16.8529 1.05846H0.0644531V25.5008H16.8529V1.05846Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M17.238 0.952393V29.4774H68.7814V26.0328H72.2363V24.4149V15.368V4.84596H66.9374V0.952393H17.238Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
      <svg
        data-type="Studio Flex"
        onMouseOut={handleOnMouseOut}
        onMouseOver={handleOnMouseOver}
        onClick={handleOnApartmentClick}
        data-apartment="apartments-studio-1"
        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
        x={9.06}
        y={126}
        width="73"
        height="30"
        viewBox="0 0 73 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M68.7814 0.799072H17.238V29.6647H66.9374V25.8007H72.2363V15.0942V6.11895V4.4029H68.7814V0.799072Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M16.8529 4.83698V29.5578H0.0644531V4.83698H16.8529Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
    </>
  );
}

export default FloorEastWingHighlighting;