zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fxs

Browse Source
This commit is contained in:
zojgame
2024-06-12 18:54:30 +05:00
parent ca7da6d502
commit 453c287625
6 changed files with 106 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/mobile/MasterplanFiltersModal.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ const MasterplanFiltersModal = () => {
</div>
</div>
<div className="flex flex-col w-full">
<p className="text-[#0D1922] text-s pb-4">Apartment type</p>
<p className="text-[#0D1922] text-s pb-4">Views</p>
<div className="grid grid-cols-2 gap-2">
{viewCheckboxes.map((checkbox) => (
<Checkbox
src/components/modals/mobile/SearchFiltersModal.tsx
+27
View File
@@ -15,8 +15,12 @@ import {
initialSliders,
initialSwitchers,
} from "../../../consts/initialSearchFilters";
import { initialViewCheckboxes } from "../../../consts/initialMasterplanFilters";
const SearchFiltersModal = () => {
// const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
// initialViewCheckboxes
// );
const { setModal } = useModal();
const { setIsAnimate } = useContext(MobileModalWrapperContext);
const {
@@ -28,6 +32,8 @@ const SearchFiltersModal = () => {
setApartmentTypeCheckboxes,
roveHomeTypeCheckboxes,
setRoveHomeTypeCheckboxes,
setViewCheckboxes,
viewCheckboxes,
} = useSearchFilters();
const handlers = useSwipeable({
onSwipedDown: () => handleOnCrossClick(),
@@ -54,6 +60,17 @@ const SearchFiltersModal = () => {
setApartmentTypeCheckboxes(updatedCheckboxes);
};
const handleOnViewCheckboxClick = (checkboxId: string) => {
const updatedCheckboxes = viewCheckboxes.map((cbox) => {
if (checkboxId !== cbox.id) return cbox;
const isSelected = !cbox.selected;
return { ...cbox, selected: isSelected };
});
setViewCheckboxes(updatedCheckboxes);
};
const handleOnCheckboxRoveHomeClick = (checkboxId: string) => {
const updatedCheckboxes = roveHomeTypeCheckboxes.map((cbox) => {
if (checkboxId !== cbox.id) return cbox;
@@ -101,6 +118,7 @@ const SearchFiltersModal = () => {
const handleOnResetClick = () => {
setMultirangeSliders(initialSliders);
setViewCheckboxes(initialViewCheckboxes);
setApartmentTypeCheckboxes(initialApartmentTypeCheckboxes);
setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes);
setSwitchers(initialSwitchers);
@@ -175,6 +193,15 @@ const SearchFiltersModal = () => {
))}
</div>
</div>
<div className="grid grid-cols-2 gap-2">
{viewCheckboxes.map((checkbox) => (
<Checkbox
checkbox={checkbox}
key={checkbox.id}
onClick={handleOnViewCheckboxClick}
/>
))}
</div>
<div className="flex justify-between">
<p className="text-[#00BED7] text-m">195 apartments found</p>
<Button
src/components/searchPage/SidebarFilters.tsx
+35 -12
View File
@@ -10,6 +10,9 @@ import {
initialRoveHomeCheckboxes,
} from "../../consts/initialSearchFilters";
import useSearchFilters from "../../store/useSearchFilters";
import { initialViewCheckboxes } from "../../consts/initialMasterplanFilters";
import { useState } from "react";
import { ICheckbox } from "../../types/checkbox";
const SidebarFilters = () => {
const {
@@ -23,6 +26,10 @@ const SidebarFilters = () => {
setRoveHomeTypeCheckboxes,
} = useSearchFilters();
const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
initialViewCheckboxes
);
const handleOnCheckboxApartmentClick = (checkboxId: string) => {
const updatedCheckboxes = apartmentTypeCheckboxes.map((cbox) => {
if (checkboxId !== cbox.id) return cbox;
@@ -69,7 +76,19 @@ const SidebarFilters = () => {
setSwitchers(updatedSwitchers);
};
const handleOnViewCheckboxClick = (checkboxId: string) => {
const updatedCheckboxes = viewCheckboxes.map((cbox) => {
if (checkboxId !== cbox.id) return cbox;
const isSelected = !cbox.selected;
return { ...cbox, selected: isSelected };
});
setViewCheckboxes(updatedCheckboxes);
};
const handleOnResetClick = () => {
setViewCheckboxes(initialViewCheckboxes);
setApartmentTypeCheckboxes(initialApartmentTypeCheckboxes);
setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes);
setMultirangeSliders(initialSliders);
@@ -90,9 +109,7 @@ const SidebarFilters = () => {
/>
</div>
<div className="flex flex-col pt-6 w-full">
<p className="text-[#0D1922] text-m font-semibold pb-4">
Rove Home
</p>
<p className="text-[#0D1922] text-s pb-4">Rove Home</p>
<div className="flex flex-col gap-2">
{roveHomeTypeCheckboxes.map((checkbox) => (
<Checkbox
@@ -104,9 +121,7 @@ const SidebarFilters = () => {
</div>
</div>
<div className="flex flex-col pt-6 w-full">
<p className="text-[#0D1922] text-m font-semibold pb-4">
Apartment type
</p>
<p className="text-[#0D1922] text-s pb-4">Apartment type</p>
<div className="flex flex-col gap-2">
{apartmentTypeCheckboxes.map((checkbox) => (
<Checkbox
@@ -121,12 +136,8 @@ const SidebarFilters = () => {
{multirangeSliders.map((slider) => (
<div className="flex flex-col gap-2">
<div className="flex justify-between items-center">
<p className="text-[#0D1922] text-m font-semibold ">
{slider.title}
</p>
<p className="text-[#73787C] text-m font-semibold">
{slider.unit}
</p>
<p className="text-[#0D1922] text-s ">{slider.title}</p>
<p className="text-[#73787C] text-s">{slider.unit}</p>
</div>
<MultiRangeSlider
onChange={handleOnSliderValueChange}
@@ -143,6 +154,18 @@ const SidebarFilters = () => {
</div>
))}
</div>
<div className="flex flex-col w-full">
<p className="text-[#0D1922] text-s pb-4">Views</p>
<div className="flex flex-col gap-2">
{viewCheckboxes.map((checkbox) => (
<Checkbox
checkbox={checkbox}
key={checkbox.id}
onClick={handleOnViewCheckboxClick}
/>
))}
</div>
</div>
</div>
</div>
</div>
src/components/searchParticularApartmentsPage/ApartmentCard.tsx
+9 -3
View File
@@ -9,10 +9,10 @@ const ApartmentCard = () => {
};
return (
<div
className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none"
className="bg-white flex flex-col p-4 rounded-2xl cursor-pointer select-none"
onClick={handleOnCardClick}
>
<div className="flex gap-4 justify-between">
<div className="flex gap-4 justify-between">
<div className="flex gap-1 flex-col">
<p className="text-[#00BED7] text-s leading-5">
Rove Home Marasi Drive
@@ -31,9 +31,15 @@ const ApartmentCard = () => {
isCircleRounded
/>
</div>
<div className="w-full aspect-square rounded-lg">
<div className="w-full aspect-square rounded-lg pt-6">
<img src="/images/layout-1.png" alt="" className="h-full" />
</div>
<div className="flex flex-col gap-1 pt-6">
<p className="text-[#0D1922] text-s">Studio Flex, 607,08 Sqft</p>
<p className="text-[#00BED7] text-subheadline-s font-semibold">
AED 1,668,888
</p>
</div>
</div>
);
};
src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx
+28 -19
View File
@@ -11,7 +11,7 @@ const ApartmentSidebar = () => {
return (
<div>
<div className="h-full w-[360px] bg-[#F3F3F2] flex flex-col items-center justify-between border-r lg:flex hidden">
<div className="h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
<div className="w-full py-6 px-6 flex flex-col items-start">
<div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4 gap-4 items-center">
<Button
@@ -23,25 +23,34 @@ const ApartmentSidebar = () => {
1 bedroom apartment
</h2>
</div>
<div className="flex gap-1 flex-col pt-6">
<p className="text-[#00BED7] text-m leading-5">
Rove Home Marasi Drive
</p>
<div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
<p className="text-caption-m font-semibold leading-4">
East Wing
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
Floor 11-35
</p>
<div className="w-full pt-6">
<div className="bg-white w-full p-4 rounded-2xl">
<div className="flex gap-1 flex-col ">
<div className="flex justify-between">
<p className="text-[#00BED7] text-s leading-5">
Rove Home Marasi Drive
</p>
<div className="text-caption-m font-semibold text-white bg-[#00BED7] py-[3px] px-2 rounded-full">
234 units
</div>
</div>
<div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
<p className="text-caption-m font-semibold leading-4">
East Wing
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
Floor 11-35
</p>
</div>
<p className="text-[#00BED7] text-subheadline-s font-bold pt-4">
AED 1668888
</p>
</div>
<div className="w-full aspect-square mt-4 pb-4">
<img src="/images/layout-1.png" alt="" className="h-full" />
</div>
</div>
<p className="text-[#00BED7] text-subheadline-s font-bold pt-4">
AED 1668888
</p>
</div>
<div className="w-full aspect-square mt-4 border-b pb-4">
<img src="/images/layout-1.png" alt="" className="h-full" />
</div>
</div>
</div>
src/store/useSearchFilters.ts
+6
View File
@@ -8,10 +8,13 @@ import {
} from "../consts/initialSearchFilters";
import { IMultirangeSlider } from "../types/multirangeSlider";
import { ISwitcher } from "../types/switcher";
import { initialViewCheckboxes } from "../consts/initialMasterplanFilters";
interface Store {
apartmentTypeCheckboxes: ICheckbox[];
viewCheckboxes: ICheckbox[];
setApartmentTypeCheckboxes: (typeCheckboxes: ICheckbox[]) => void;
setViewCheckboxes: (checkboxes: ICheckbox[]) => void;
roveHomeTypeCheckboxes: ICheckbox[];
setRoveHomeTypeCheckboxes: (typeCheckboxes: ICheckbox[]) => void;
multirangeSliders: IMultirangeSlider[];
@@ -22,8 +25,11 @@ interface Store {
const useSearchFilters = create<Store>((set) => ({
apartmentTypeCheckboxes: initialApartmentTypeCheckboxes,
viewCheckboxes: initialViewCheckboxes,
setApartmentTypeCheckboxes: (typeCheckboxes) =>
set(() => ({ apartmentTypeCheckboxes: typeCheckboxes })),
setViewCheckboxes: (typeCheckboxes) =>
set(() => ({ viewCheckboxes: typeCheckboxes })),
roveHomeTypeCheckboxes: initialRoveHomeCheckboxes,
setRoveHomeTypeCheckboxes: (typeCheckboxes) =>
set(() => ({ roveHomeTypeCheckboxes: typeCheckboxes })),