IRTH-Touch/client/src/components/complexWingPage/FloorSidebar/FloorEastWingTopHighlighting.tsx

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

function FloorEastWingTopHighlighting({
  handleOnMouseOut,
  handleOnMouseOver,
  handleOnApartmentClick,
}: FloorEastWingTopHighlightingProps) {
  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"
        width="88"
        height="70"
        viewBox="0 0 88 70"
        x={94.26}
        y={39.61}
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M37.4416 47.1579L33.6245 45.3636L44.3253 23.4401L48.0444 25.2018L37.4416 47.1579Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M23.5133 58.544L25.5672 54.8287L55.5142 69.3691L65.2604 49.4993L66.359 50.057L67.937 46.9297L71.0509 48.5517C72.5722 49.3441 74.4475 48.7248 75.1976 47.1822L87.3465 22.1984C88.1364 20.5742 87.3476 18.6233 85.6507 18.0045L37.7803 0.547369C36.3212 0.015281 34.6954 0.666085 34.0066 2.05802L31.5133 7.09591L22.8819 2.98319L8.58992 32.2338L7.57561 31.7343L0.0341797 47.0746L1.58678 47.833L9.67981 51.7864L23.5133 58.544ZM37.4416 47.1579L33.6245 45.3636L44.3253 23.4401L48.0444 25.2018L37.4416 47.1579Z"
          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"
        width="73"
        height="87"
        viewBox="0 0 73 87"
        x={41}
        y={0}
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M32.5912 58.5005L28.7741 56.7062L39.4749 34.7827L43.194 36.5444L32.5912 58.5005Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M28.2063 74.5399L42.2919 81.4206L50.3853 85.3742L51.8093 86.0698L59.1424 70.6884L57.9507 70.033L72.2416 40.9286L63.3587 36.7142L66.0572 31.6615C66.8135 30.2455 66.3411 28.4857 64.9774 27.6387L21.7582 0.796817C20.2225 -0.156957 18.1988 0.428848 17.4101 2.0555L5.33356 26.9622C4.61199 28.4504 5.20971 30.2424 6.68015 30.9995L10.161 32.7916L8.74124 35.8939L9.7403 36.3409L0.101562 56.2952L30.07 71.0002L28.2063 74.5399ZM32.5912 58.5005L28.7741 56.7062L39.4749 34.7827L43.194 36.5444L32.5912 58.5005Z"
          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"
        y={125}
        x={9}
        width="73"
        height="57"
        viewBox="0 0 73 57"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.3466 0.0617676H16.1783V56.5067H69.7002V51.5572H72.9689V39.5828V30.825H72.963V28.6804H59.9008V4.03219H47.0893V0.0617676H17.3466Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M15.6667 3.84307H0.666016V52.4613H15.6667V3.84307Z"
          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={125}
        width="78"
        height="57"
        viewBox="0 0 78 57"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.662109 39.7869V51.5515H4.03768V56.4767H57.5102V0.0410156H26.5681V4.05196H13.6902V28.6231H0.662109V30.8402V39.7869Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M57.9663 8.36376H77.5586V46.6439H57.9663V8.36376Z"
          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={4.46}
        y={183}
        width="77"
        height="32"
        viewBox="0 0 77 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M76.9691 5.32577V3.55554H73.7004V0.162842H18.1451V31.8098H21.5662V30.5281H53.9992V31.8224H71.6254V24.8243H76.9691V13.8638V5.32577Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M0.242188 4.14775V31.8098H17.7145V4.14775H0.242188Z"
          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={183}
        width="78"
        height="32"
        viewBox="0 0 78 32"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.662109 14.3096V24.8356H5.8425V31.9174H19.0689V30.5738H59.6759V0.113281H4.03768V3.5896H0.662109V5.22047V14.3096Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M60.0319 4.01643H77.5586V31.9174H60.0319V4.01643Z"
          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={4.46}
        y={216}
        width="77"
        height="33"
        viewBox="0 0 77 33"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M73.7448 32.5354V28.6863H76.9691V27.0022V18.4757V7.36456H71.6254V0.278274H53.9992V1.69553H21.5662V0.254639H18.1451V32.5354H73.7448Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M0.242188 0.254639V28.34H17.7145V0.254639H0.242188Z"
          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={216.3}
        width="78"
        height="33"
        viewBox="0 0 78 33"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M4.12126 28.5608V32.5681H59.6759V1.73959H19.0689V0.337321H5.8425V7.27978H0.662109V18.0732V27.0198V28.5608H4.12126Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M60.0319 0.289307H77.5586V28.4344H60.0319V0.289307Z"
          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={9}
        y={250}
        width="73"
        height="57"
        viewBox="0 0 73 57"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M72.9719 16.7399V4.98665H69.7446V0.0654297H16.1078V56.6636H47.167V52.6935H59.9591V27.8975H72.9719V25.7104V16.7399Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M15.5797 4.03601H0.666016V52.6572H15.5797V4.03601Z"
          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={250}
        width="78"
        height="57"
        viewBox="0 0 78 57"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.662109 25.804V27.9046H13.7708V52.7081H26.5361V56.6677H57.4948V0.0319824H4.12126V5.02312H0.662109V16.6865V25.804Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M77.4068 48.2411V9.79336H57.9888V48.2411H77.4068Z"
          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="100"
        height="84"
        viewBox="0 0 100 84"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M69.1864 38.0339L72.0786 40.9467L50.681 62.2016L47.8587 59.2904L69.1864 38.0339Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M0.624023 31.6515V32.9749H6.40788L55.9138 82.4318L59.884 78.3635L65.4718 83.6572L94.9315 54.4612L76.7449 36.347L72.69 40.3426L54.5099 22.2023V0.268311H8.55087V2.78348H5.93509V21.4964H0.624023V22.6533V31.6515ZM69.1864 38.0339L72.0786 40.9467L50.681 62.2016L47.8587 59.2904L69.1864 38.0339Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M99.0468 36.5627L86.9001 24.5394C80.831 18.532 77.4163 10.3472 77.4163 1.80777V0.268311H55.2076V22.2023L72.69 39.7317L76.7449 35.6995L88.3716 47.2062L99.0468 36.5627Z"
          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.46}
        y={386.57}
        width="77"
        height="52"
        viewBox="0 0 77 52"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M73.7537 5.51381V0.574219H18.2338V50.4153H50.4802V51.6531H70.4037V26.6998H76.9721V24.7513V15.56V5.51381H73.7537Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M17.7952 47.5694V4.83612H0.238281V47.5694H17.7952Z"
          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.46}
        y={439}
        width="77"
        height="52"
        viewBox="0 0 77 52"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M50.4802 1.63666H18.2338V51.222H73.7027V46.2792H76.9721V36.0496V27.0335V25.1328H70.4037V0.324219H50.4802V1.63666Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M17.7952 4.45175H0.238281V47.0947H17.7952V4.45175Z"
          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.45}
        y={491.64}
        width="90"
        height="97"
        viewBox="0 0 90 97"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0.224609 47.0658H17.7949V4.80184H0.224609V47.0658Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M85.7376 96.2551V78.9278H58.9691V96.2551H85.7376Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
        <path
          d="M78.6838 19.4997H76.9718V5.51494H73.7024V0.63501H18.2335V50.2799H48.7934V54.433H55.3024V78.6627H89.0398H89.4037V19.4997H87.8314H78.6838Z"
          fill="#00BED7"
          fillOpacity="0.2"
        />
      </svg>
    </>
  );
}

export default FloorEastWingTopHighlighting;