4k sequence

src/components/Checkbox.tsx

@@ -5,10 +5,11 @@ import SelectedCheckboxIcon from "./icons/SelectedCheckboxIcon";
 interface CheckboxProps {
   title: string;
   disabled?: boolean;
+  selected?: boolean;
 }
 
-const Checkbox = ({ title, disabled }: CheckboxProps) => {
-  const [isSelected, setIsSelected] = useState(false);
+const Checkbox = ({ title, disabled, selected = false }: CheckboxProps) => {
+  const [isSelected, setIsSelected] = useState(selected);
 
   const handleOnClick = () => {
     if (!disabled) {

src/components/complexPage/SequenceSlider.tsx

@@ -153,7 +153,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
         style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
       >
         <div
-          className={`duration-300 transition-opacity ease-in-out opacity-100`}
+          className={`duration-150 transition-opacity ease-in-out opacity-100`}
         >
           {Array.from({ length: arrayLength }).map((_, index) => (
             <>

src/components/complexWingPage/SequenceWing.tsx

@@ -215,7 +215,7 @@ const SequenceWing = () => {
         <img
           width={`${width}px`}
           height={`${width}px`}
-          src="/images/sequenceWing.jpeg"
+          src="/images/sequenceWing.jpg"
           className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100`}
           alt=""
         />

src/components/modals/MasterplanFilters.tsx

@@ -5,27 +5,44 @@ import ResetIcon from "../icons/ResetIcon";
 import Checkbox from "../Checkbox";
 import Switch from "../Switch";
 import MultiRangeSlider from "../MultiRangeSlider";
+import { useState } from "react";
 
 interface ICheckbox {
   title: string;
   id: string;
   disabled?: boolean;
+  selected: boolean;
 }
 
 const checkboxes: ICheckbox[] = [
-  { title: "Studio Flex", id: "1", disabled: false },
-  { title: "Studio", id: "2" },
-  { title: "1 Bedroom", id: "3" },
-  { title: "2 Bedroom", id: "4" },
+  { title: "Studio Flex", id: "1", disabled: false, selected: false },
+  { title: "Studio", id: "2", selected: false },
+  { title: "1 Bedroom", id: "3", selected: false },
+  { title: "2 Bedroom", id: "4", selected: false },
 ];
 
 const MasterplanFilters = () => {
   const { setModal } = useModal();
+  // const [currentCheckboxes, setCurrentCheckboxes] =
+  //   useState<ICheckbox[]>(checkboxes);
+  const [keyIndex, setKeyIndex] = useState(1);
+
   const handleOnCloseClick = () => setModal(null);
 
+  const handleOnResetClick = () => {
+    // const updatedCheckboxes = checkboxes.map((checkbox) => {
+    //   return { ...checkbox, selected: false };
+    // });
+    // setCurrentCheckboxes(updatedCheckboxes);
+    setKeyIndex((prev) => prev + 1);
+  };
+
   return (
     <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center ">
-      <div className="h-full col-span-3 bg-[#F3F3F2]  flex flex-col items-center justify-between ">
+      <div
+        className="h-full col-span-3 bg-[#F3F3F2]  flex flex-col items-center justify-between "
+        key={keyIndex}
+      >
         <div className="w-full py-6 px-6 flex flex-col items-center">
           <div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4">
             <h2 className="text-subheadline-m font-semibold">Filters</h2>
@@ -88,7 +105,12 @@ const MasterplanFilters = () => {
         </div>
 
         <div className="w-full justify-items-end p-6 flex gap-2 justify-center bg-white rounded-se-2xl rounded-ss-2xl">
-          <Button text="Reset" buttonType="secondary" icon={<ResetIcon />} />
+          <Button
+            text="Reset"
+            buttonType="secondary"
+            icon={<ResetIcon />}
+            onClick={handleOnResetClick}
+          />
           <div className="text-s text-[#0D1922] py-3 px-6 ">234 apartments</div>
         </div>
       </div>