diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 39cb5c1..3dcb153 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -31,7 +31,7 @@ const Button = ({ onClick={onClick} className={`min-w-[40px] ${ icon && !text ? "p-[10px]" : padding - } transition-[background] duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center h-fit ${backgroundColor} ${textColor} ${border} ${ + } transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center h-fit ${backgroundColor} ${textColor} ${border} ${ className ? className : "" }`} > diff --git a/src/components/icons/MinusIcon.tsx b/src/components/icons/MinusIcon.tsx new file mode 100644 index 0000000..db4ebc8 --- /dev/null +++ b/src/components/icons/MinusIcon.tsx @@ -0,0 +1,20 @@ +const MinusIcon = () => { + return ( + + + + ); +}; + +export default MinusIcon; diff --git a/src/components/icons/ResetIcon.tsx b/src/components/icons/ResetIcon.tsx new file mode 100644 index 0000000..0926608 --- /dev/null +++ b/src/components/icons/ResetIcon.tsx @@ -0,0 +1,19 @@ +const ResetIcon = () => { + return ( + + + + ); +}; + +export default ResetIcon; diff --git a/src/components/icons/SelectedCheckboxIcon.tsx b/src/components/icons/SelectedCheckboxIcon.tsx new file mode 100644 index 0000000..5e39ba5 --- /dev/null +++ b/src/components/icons/SelectedCheckboxIcon.tsx @@ -0,0 +1,21 @@ +const SelectedCheckboxIcon = () => { + return ( + + + + ); +}; + +export default SelectedCheckboxIcon; diff --git a/src/components/masterplanPage/Checkbox.tsx b/src/components/masterplanPage/Checkbox.tsx new file mode 100644 index 0000000..14255b8 --- /dev/null +++ b/src/components/masterplanPage/Checkbox.tsx @@ -0,0 +1,57 @@ +import { useState } from "react"; +import MinusIcon from "../icons/MinusIcon"; +import SelectedCheckboxIcon from "../icons/SelectedCheckboxIcon"; + +interface CheckboxProps { + title: string; + disabled?: boolean; +} + +const Checkbox = ({ title, disabled }: CheckboxProps) => { + const [isSelected, setIsSelected] = useState(false); + + const handleOnClick = () => { + if (!disabled) { + setIsSelected((prev) => !prev); + } + }; + + return ( +
+
+ {disabled ? ( +
+ +
+ ) : ( +
+ {isSelected ? : <>} +
+ )} +

{title}

+
+ {!disabled ? ( +
+
8
+
+ ) : ( +
+
+ +
+
+ )} +
+ ); +}; + +export default Checkbox; diff --git a/src/components/masterplanPage/Switch.tsx b/src/components/masterplanPage/Switch.tsx new file mode 100644 index 0000000..1af07fb --- /dev/null +++ b/src/components/masterplanPage/Switch.tsx @@ -0,0 +1,25 @@ +import { useState } from "react"; + +const Switch = () => { + const [isSwitched, setIsSwitched] = useState(false); + function handleOnClick() { + setIsSwitched((prev) => !prev); + } + + return ( +
+
+
+ ); +}; + +export default Switch; diff --git a/src/components/masterplanPage/map/ButtomPanel.tsx b/src/components/masterplanPage/map/ButtomPanel.tsx index 6ab678b..cf643c8 100644 --- a/src/components/masterplanPage/map/ButtomPanel.tsx +++ b/src/components/masterplanPage/map/ButtomPanel.tsx @@ -11,7 +11,7 @@ const ButtomPanel = () => { return (
-
+ {/*

Work in progress

@@ -20,7 +20,7 @@ const ButtomPanel = () => { Mockups are in the early stages of development and may differ significantly from the final version.
-
+
*/}
+
+

+ Apartment type +

+
+ {checkboxes.map((checkbox) => ( + + ))} +
+
+
+
+

Cost

+

AED

+
+
+

Not the first floor

+ +
+ + {/*
+ + + + +
*/} +
+
+ +
+
+
+ + ); +}; + +export default MasterplanFilters; diff --git a/src/consts/buttonStyles.ts b/src/consts/buttonStyles.ts index e38c829..aeb92fb 100644 --- a/src/consts/buttonStyles.ts +++ b/src/consts/buttonStyles.ts @@ -2,7 +2,8 @@ import { ButtonStyle } from "../types/button"; const backgroundColors: ButtonStyle = { cta: "bg-[#00BED7] hover:bg-[#00A8BE]", - primary: "bg-[#ffffff] hover:bg-[#F3F3F2]", + primary: "bg-[#ffffff] hover:bg-[#F3F3F2] active:bg-[#fff]", + secondary: "bg-[#ffffff] hover:bg-[#F3F3F2] active:bg-[#fff]", tertiary: "bg-[#0D192266] hover:bg-[#0D1922B2]", fab: "bg-[#ffffff] hover:bg-[#F3F3F2]", }; @@ -10,20 +11,23 @@ const backgroundColors: ButtonStyle = { const textColors: ButtonStyle = { cta: "text-[#ffffff]", primary: "text-[#0D1922]", + secondary: "text-[#0D1922]", tertiary: "text-[#ffffff]", fab: "text-[#ffffff]", }; const borders: ButtonStyle = { cta: "rounded-lg", - primary: "rounded-lg", + primary: "rounded-lg border border-[#ffffff] active:border-[#00BED7]", + secondary: "rounded-lg border border-[#E2E2DC] active:border-[#00BED7]", tertiary: "rounded-full", fab: "rounded-full", }; -const paddings = { +const paddings: ButtonStyle = { cta: "py-3 px-6", primary: "py-3 px-6", + secondary: "py-3 px-6", tertiary: "py-1 px-3", fab: "py-3 px-6", }; diff --git a/src/index.css b/src/index.css index 6418923..b820102 100644 --- a/src/index.css +++ b/src/index.css @@ -17,6 +17,7 @@ body { @layer components { .text-caption-s { font-family: "Usual", sans-serif; + font-size: clamp(10px, 0.3744rem + 0.313vw, 12px); line-height: 135%; } @@ -63,6 +64,9 @@ body { font-size: clamp(44px, -0.257rem + 3.7559vw, 68px); } + .text-button-m { + } + .rubber-headline-indent { text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px); } diff --git a/src/pages/Company.tsx b/src/pages/Company.tsx index b48a644..5566222 100644 --- a/src/pages/Company.tsx +++ b/src/pages/Company.tsx @@ -7,7 +7,6 @@ import Footer from "../components/Footer"; const Company = () => { return (
- {/*

*/}

IRTH is a privately held real estate investment platform part of a large local family conglomerate from Dubai diff --git a/src/pages/Masterplan.tsx b/src/pages/Masterplan.tsx index 8cabdc3..a185ce0 100644 --- a/src/pages/Masterplan.tsx +++ b/src/pages/Masterplan.tsx @@ -1,14 +1,15 @@ import { useEffect } from "react"; import useModal from "../store/useModal"; -import ZoomHint from "../components/modals/ZoomHintModal"; import Map from "../components/masterplanPage/map/Map"; import TopPanel from "../components/masterplanPage/TopPanel"; import ButtomPanel from "../components/masterplanPage/map/ButtomPanel"; +import MasterplanFilters from "../components/modals/MasterplanFilters"; const Masterplan = () => { const { setModal } = useModal(); useEffect(() => { - setModal(); + setModal(); + // setModal(); }, []); return ( diff --git a/src/types/button.ts b/src/types/button.ts index 8cbf1cf..9cc5ab9 100644 --- a/src/types/button.ts +++ b/src/types/button.ts @@ -1,4 +1,4 @@ -type ButtonType = "primary" | "tertiary" | "cta" | "fab"; +type ButtonType = "primary" | "tertiary" | "cta" | "fab" | "secondary"; type ButtonStyle = { [key in ButtonType]: string; };