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

filter sidebar

Browse Source
This commit is contained in:
zojgame
2024-04-26 18:29:12 +05:00
parent 9377b3241f
commit c26d766429
13 changed files with 254 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+1 -1
View File
@@ -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 : ""
}`}
>
src/components/icons/MinusIcon.tsx
+20
View File
@@ -0,0 +1,20 @@
const MinusIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 10.4167H5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
);
};
export default MinusIcon;
src/components/icons/ResetIcon.tsx
+19
View File
@@ -0,0 +1,19 @@
const ResetIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.8984 1.66674L9.99984 3.36571M9.99984 3.36571L11.739 6.00402M9.99984 3.36571C13.6817 3.36571 16.6665 6.34325 16.6665 10.0162C16.6665 13.6892 13.6817 16.6667 9.99984 16.6667C6.31794 16.6667 3.33317 13.6892 3.33317 10.0162C3.33317 8.06883 4.17222 6.31692 5.50936 5.10063"
stroke="currentColor"
strokeWidth="1.5"
/>
</svg>
);
};
export default ResetIcon;
src/components/icons/SelectedCheckboxIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const SelectedCheckboxIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.1665 9.16675L8.33317 13.3334L15.8332 6.66675"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default SelectedCheckboxIcon;
src/components/masterplanPage/Checkbox.tsx
+57
View File
@@ -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 (
<div
onClick={handleOnClick}
className={`flex justify-between bg-white p-3 rounded-2xl transition-[background] duration-300 ease-in-out select-none ${
disabled ? "" : "hover:bg-[#F3F3F2] cursor-pointer"
}`}
>
<div className="flex gap-3">
{disabled ? (
<div className="bg-[#E2E2DC] rounded-[4px] w-6 h-6 text-white flex justify-center items-center">
<MinusIcon />
</div>
) : (
<div
className={` rounded-[4px] w-6 h-6 flex justify-center items-center ease-in-out duration-300 transition-[background] ${
isSelected ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
}`}
>
{isSelected ? <SelectedCheckboxIcon /> : <></>}
</div>
)}
<p className="text-s text-[#73787C]">{title}</p>
</div>
{!disabled ? (
<div className="bg-[#00BED7] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s ">
<div className="h-fit align-middle text-center flex">8</div>
</div>
) : (
<div className="bg-[#E2E2DC] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s">
<div className="h-fit align-middle text-center flex">
<MinusIcon />
</div>
</div>
)}
</div>
);
};
export default Checkbox;
src/components/masterplanPage/Switch.tsx
+25
View File
@@ -0,0 +1,25 @@
import { useState } from "react";
const Switch = () => {
const [isSwitched, setIsSwitched] = useState(false);
function handleOnClick() {
setIsSwitched((prev) => !prev);
}
return (
<div
className={`w-10 h-6 relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
}`}
onClick={handleOnClick}
>
<div
className={`w-5 h-5 bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out ${
isSwitched ? "top-[2px] left-[18px]" : "top-[2px] left-[2px]"
}`}
></div>
</div>
);
};
export default Switch;
src/components/masterplanPage/map/ButtomPanel.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ const ButtomPanel = () => {
return (
<div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
<div className="flex flex-col gap-2">
<div className="flex flex-col w-[325px] pl-6 pr-3 py-2 bg-[#00000033]">
{/* <div className="flex flex-col w-[325px] pl-6 pr-3 py-2 bg-[#00000033]">
<div className="flex gap-1">
<DisclaimerIcon />
<p className="text-s text-white">Work in progress</p>
@@ -20,7 +20,7 @@ const ButtomPanel = () => {
Mockups are in the early stages of development and may differ
significantly from the final version.
</div>
</div>
</div> */}
<div className="flex gap-2 pb-6 pl-6">
<Button
text="Disclaimer"
src/components/modals/MasterplanFilters.tsx
+94
View File
@@ -0,0 +1,94 @@
import useModal from "../../store/useModal";
import Button from "../Button";
import CrossIcon from "../icons/CrossIcon";
import ResetIcon from "../icons/ResetIcon";
import Checkbox from "../masterplanPage/Checkbox";
import Switch from "../masterplanPage/Switch";
interface ICheckbox {
title: string;
id: string;
disabled?: boolean;
}
const checkboxes: ICheckbox[] = [
{ title: "Studio Flex", id: "1", disabled: true },
{ title: "Studio", id: "2" },
{ title: "1 Bedroom", id: "3" },
{ title: "2 Bedroom, Type A", id: "4" },
{ title: "2 Bedroom, Type B", id: "5" },
];
const MasterplanFilters = () => {
const { setModal } = useModal();
const handleOnCloseClick = () => setModal(null);
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="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>
<Button
icon={<CrossIcon />}
buttonType="fab"
onClick={handleOnCloseClick}
/>
</div>
<div className="flex flex-col pt-6 w-full">
<p className="text-[#0D1922] text-m font-semibold pb-4">
Apartment type
</p>
<div className="flex flex-col gap-2">
{checkboxes.map((checkbox) => (
<Checkbox
title={checkbox.title}
key={checkbox.id}
disabled={checkbox.disabled}
/>
))}
</div>
</div>
<div className="flex flex-col pt-6 w-full">
<div className="flex justify-between items-center pb-2">
<p className="text-[#0D1922] text-m font-semibold ">Cost</p>
<p className="text-[#73787C] text-m font-semibold">AED</p>
</div>
<div className="flex justify-between w-full">
<p className="text-s text-[#73787C]">Not the first floor</p>
<Switch />
</div>
{/* <div className="flex justify-between p-3 bg-white rounded-2xl relative">
<input type="text" />
<input type="text" />
<input
min="500"
max="50000"
step="500"
type="range"
className="absolute -bottom-2 left-3 right-3"
style={{ backgroundColor: "#ced4da" }}
/>
<input
min="500"
max="50000"
step="500"
type="range"
className="absolute left-3 -bottom-2 right-3"
style={{ backgroundColor: "#ced4da" }}
/>
</div> */}
</div>
</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 />} />
<div className="text-s text-[#0D1922] py-3 px-6 ">234 apartments</div>
</div>
</div>
</div>
);
};
export default MasterplanFilters;
src/consts/buttonStyles.ts
+7 -3
View File
@@ -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",
};
src/index.css
+4
View File
@@ -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);
}
src/pages/Company.tsx
-1
View File
@@ -7,7 +7,6 @@ import Footer from "../components/Footer";
const Company = () => {
return (
<section className={`xl:pt-16 pt-10 font-usual ${isMobile ? "pt-24" : ""}`}>
{/* <h1 className="uppercase font-mixcase xl:text-[56px] sm:text-[40px] xl:leading-[56px] sm:leading-[40px] text-[28px] leading-[28px] xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4"> */}
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4">
IRTH is a privately held real estate investment platform part of a large
local family conglomerate from Dubai
src/pages/Masterplan.tsx
+3 -2
View File
@@ -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(<ZoomHint />);
setModal(<MasterplanFilters />);
// setModal(<ZoomHint />);
}, []);
return (
src/types/button.ts
+1 -1
View File
@@ -1,4 +1,4 @@
type ButtonType = "primary" | "tertiary" | "cta" | "fab";
type ButtonType = "primary" | "tertiary" | "cta" | "fab" | "secondary";
type ButtonStyle = {
[key in ButtonType]: string;
};