diff --git a/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/PropertyTypeSelect.tsx b/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/PropertyTypeSelect.tsx new file mode 100644 index 0000000..4cfea33 --- /dev/null +++ b/src/app/(client-components)/(HeroSearchForm2Mobile)/(real-estate-search-form)/PropertyTypeSelect.tsx @@ -0,0 +1,61 @@ +"use client"; + +import React, { useEffect } from "react"; +import { FC } from "react"; +import Checkbox from "@/shared/Checkbox"; +import { ClassOfProperties } from "../../type"; + +// DEMO DATA + +export interface PropertyTypeSelectProps { + onChange?: (data: ClassOfProperties[]) => void; + defaultValue?: ClassOfProperties[]; +} + +const PropertyTypeSelect: FC = ({ + onChange, + defaultValue, +}) => { + const [typeOfProperty, setTypeOfProperty] = React.useState< + ClassOfProperties[] + >(defaultValue || []); + + useEffect(() => { + if (!defaultValue) return; + setTypeOfProperty(defaultValue); + }, [defaultValue]); + + return ( +
+ + Property types + +
+ {typeOfProperty.map((item, index) => ( +
+ { + const newState = typeOfProperty.map((item, i) => { + if (i === index) { + return { ...item, checked: e }; + } + return item; + }); + setTypeOfProperty(() => { + return newState; + }); + onChange && onChange(newState); + }} + /> +
+ ))} +
+
+ ); +}; + +export default PropertyTypeSelect;