started favorites compare
This commit is contained in:
+44
-44
@@ -1,109 +1,109 @@
|
||||
import { Link } from 'react-router';
|
||||
import YoutubeIcon from './icons/YoutubeIcon';
|
||||
import InstagramIcon from './icons/InstagramIcon';
|
||||
import FacebookIcon from './icons/FacebookIcon';
|
||||
import LinkedInIcon from './icons/LinkedInIcon';
|
||||
import TwitterIcon from './icons/TwitterIcon';
|
||||
import ChevronDownIcon from './icons/ChevronDownIcon';
|
||||
import { Link } from "react-router";
|
||||
import YoutubeIcon from "./icons/YoutubeIcon";
|
||||
import InstagramIcon from "./icons/InstagramIcon";
|
||||
import FacebookIcon from "./icons/FacebookIcon";
|
||||
import LinkedInIcon from "./icons/LinkedInIcon";
|
||||
import TwitterIcon from "./icons/TwitterIcon";
|
||||
import ChevronDownIcon from "./icons/ChevronDownIcon";
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className='z-1 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white'>
|
||||
<footer className="z-1 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white">
|
||||
<img
|
||||
src='/images/logo.svg'
|
||||
className='2xl:w-[5.972vw] w-[86px] cursor-pointer'
|
||||
src="/images/logo.svg"
|
||||
className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
|
||||
onClick={() => {
|
||||
window.location.href = '/';
|
||||
window.location.href = "/";
|
||||
}}
|
||||
alt='IRTH'
|
||||
alt="IRTH"
|
||||
/>
|
||||
|
||||
<p className='2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12'>
|
||||
<p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12">
|
||||
For more information, visit
|
||||
<br />
|
||||
our website:
|
||||
<Link className='text-[#00BED7] underline' to={'https://www.irth.ae'}>
|
||||
<Link className="text-[#00BED7] underline" to={"https://www.irth.ae"}>
|
||||
www.irth.ae
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<div className='2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6'>
|
||||
<p className='text-s text-[#0D1922]/40'>Follow us for more:</p>
|
||||
<div className='flex 2xl:gap-[0.278vw] gap-1'>
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
|
||||
<p className="text-s text-[#0D1922]/40">Follow us for more:</p>
|
||||
<div className="flex 2xl:gap-[0.278vw] gap-1">
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<YoutubeIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<InstagramIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<FacebookIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<LinkedInIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<TwitterIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1'>
|
||||
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1">
|
||||
<Link
|
||||
to={'/'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
to={"/"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
>
|
||||
Map
|
||||
</Link>
|
||||
<Link
|
||||
to={'/unit-types'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
to={"/unit-types"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
>
|
||||
Unit Types
|
||||
</Link>
|
||||
<Link
|
||||
to={'/about-irth'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
to={"/about-irth"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
>
|
||||
About IRTH
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2'>
|
||||
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2">
|
||||
<Link
|
||||
to={'/favorites'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
to={"/favorites"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
>
|
||||
Favorites
|
||||
</Link>
|
||||
<Link
|
||||
to={'/search'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-2.5 text-[#0D1922]/70'
|
||||
to={"/search"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
>
|
||||
Search
|
||||
</Link>
|
||||
<button className='text-btn-l flex-1 content-center md:my-3 text-[#0D1922]/70 flex items-center gap-2'>
|
||||
<button className="text-btn-l flex-1 content-center md:my-3 my-[13px] text-[#0D1922]/70 flex items-center gap-2">
|
||||
<span>Brochures</span>
|
||||
<div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5'>
|
||||
<div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5">
|
||||
<ChevronDownIcon />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]'>
|
||||
<div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
|
||||
<Link
|
||||
to={'/'}
|
||||
className='md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70'
|
||||
to={"/"}
|
||||
className="md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
|
||||
@@ -67,7 +67,7 @@ function Header() {
|
||||
ref={burgerRef}
|
||||
onlyIcon
|
||||
variant="secondary"
|
||||
className="2xl:hidden !outline !outline-[#E2E2DC] md:mr-6 mr-4"
|
||||
className="2xl:hidden !bg-[#F3F3F2] md:mr-6 mr-4"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (modal) setModal(null);
|
||||
|
||||
@@ -67,7 +67,10 @@ function ProjectSelect<T extends boolean = false>({
|
||||
))}
|
||||
</div>
|
||||
<Select
|
||||
options={["All", ...projects.map((project) => project.title)]}
|
||||
options={[
|
||||
...(withAll ? ["All"] : []),
|
||||
...projects.map((project) => project.title),
|
||||
]}
|
||||
onSelect={(option) =>
|
||||
setSelectedProject(
|
||||
projects.find((project) => project.title === option) ||
|
||||
|
||||
@@ -388,6 +388,7 @@ function SearchFilters({
|
||||
prev.delete("unitTypes");
|
||||
return prev;
|
||||
});
|
||||
if (inModal) setInModal(false);
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
@@ -644,19 +645,14 @@ function SearchFilters({
|
||||
onlyIcon={!inModal && innerWidth < 768}
|
||||
onClick={resetFilters}
|
||||
className={clsx(
|
||||
!inModal && "max-md:bg-[#F3F3F2]",
|
||||
"max-md:!transition-none"
|
||||
!inModal ? "max-md:bg-[#F3F3F2]" : "max-md:w-full",
|
||||
"max-md:!transition-none justify-center"
|
||||
)}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||||
<RestartIcon />
|
||||
</span>
|
||||
<p
|
||||
className={clsx(
|
||||
"text-s max-md:w-full",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
<p className={clsx("text-s", !inModal && "max-md:hidden")}>
|
||||
Reset filters
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
@@ -4,7 +4,7 @@ function RestartIcon() {
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="m14.26 3.583.95-.557a.75.75 0 0 0-.758-1.294L11.848 3.26a1 1 0 0 0-.33 1.413l1.53 2.32a.75.75 0 0 0 1.252-.826l-.806-1.224c3.288.687 5.756 3.596 5.756 7.078 0 3.991-3.244 7.23-7.25 7.23s-7.25-3.239-7.25-7.23a7.2 7.2 0 0 1 1.838-4.812c.276-.309.302-.78.023-1.087s-.755-.331-1.037-.027A8.7 8.7 0 0 0 3.25 12.02c0 4.823 3.92 8.73 8.75 8.73s8.75-3.907 8.75-8.73c0-4.044-2.753-7.443-6.49-8.437"
|
||||
d="m14.26 3.583.95-.557a.75.75 0 0 0-.758-1.294L11.848 3.26a1 1 0 0 0-.33 1.413l1.53 2.32a.75.75 0 0 0 1.252-.826l-.806-1.223c3.288.686 5.756 3.595 5.756 7.077 0 3.991-3.244 7.23-7.25 7.23s-7.25-3.239-7.25-7.23a7.2 7.2 0 0 1 1.838-4.812c.276-.309.302-.78.023-1.087s-.755-.331-1.037-.027A8.7 8.7 0 0 0 3.25 12.02c0 4.823 3.92 8.73 8.75 8.73s8.75-3.907 8.75-8.73c0-4.043-2.753-7.443-6.49-8.437"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
function SquaresIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 13.75H5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25v-5l-.005-.05a.25.25 0 0 0-.245-.2Zm9 0h-5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25v-5l-.005-.05a.25.25 0 0 0-.245-.2Zm0-9h-5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25V5l-.005-.05a.25.25 0 0 0-.245-.2Zm-9 0H5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25V5l-.005-.05a.25.25 0 0 0-.245-.2Z"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default SquaresIcon;
|
||||
+5
-47
@@ -1,13 +1,13 @@
|
||||
@import url('/fonts/Usual/stylesheet.css');
|
||||
@import url('/fonts/Mixcase/stylesheet.css');
|
||||
@import 'tailwindcss';
|
||||
@import url("/fonts/Usual/stylesheet.css");
|
||||
@import url("/fonts/Mixcase/stylesheet.css");
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--breakpoint-2xl: 1440px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Usual', sans-serif;
|
||||
font-family: "Usual", sans-serif;
|
||||
color: #0d1922;
|
||||
}
|
||||
|
||||
@@ -17,48 +17,6 @@ button {
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-headline-l {
|
||||
@apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
|
||||
}
|
||||
|
||||
.text-h4 {
|
||||
@apply 2xl:text-[clamp(20px,1.389vw,28px)] text-[20px] leading-[120%];
|
||||
}
|
||||
|
||||
.text-h5 {
|
||||
@apply 2xl:text-[clamp(14px,0.972vw,20px)] text-[14px] leading-[125%];
|
||||
}
|
||||
|
||||
.text-subheadline-l {
|
||||
@apply 2xl:text-[clamp(40px,2.778vw,48px)] md:max-2xl:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
|
||||
}
|
||||
|
||||
.text-subheadline-m {
|
||||
@apply 2xl:text-[clamp(24px,1.667vw,28px)] md:max-2xl:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
|
||||
}
|
||||
|
||||
.text-subheadline-s {
|
||||
@apply 2xl:text-[clamp(20px,1.389vw,24px)] md:max-2xl:text-[clamp(16px,2.315vw,20px)] text-xl leading-[140%];
|
||||
}
|
||||
|
||||
.text-m {
|
||||
@apply 2xl:text-[clamp(16px,1.111vw,19px)] md:max-2xl:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
|
||||
}
|
||||
|
||||
.text-s {
|
||||
@apply 2xl:text-[clamp(14px,0.972vw,16px)] md:max-2xl:text-[clamp(12px,1.737vw,14px)] text-sm leading-[140%];
|
||||
}
|
||||
|
||||
.text-caption-m {
|
||||
@apply 2xl:text-[clamp(12px,0.833vw,14px)] md:max-2xl:text-[clamp(12px,1.563vw,12px)] text-[clamp(12px,3.333vw,12px)] leading-[135%];
|
||||
}
|
||||
|
||||
.text-caption-s {
|
||||
@apply 2xl:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
.text-h1 {
|
||||
@apply 2xl:text-[3.889vw] text-[56px] leading-none;
|
||||
}
|
||||
@@ -117,5 +75,5 @@ button {
|
||||
}
|
||||
|
||||
@utility font-mixcase-unmixed {
|
||||
font-family: 'Mixcase Unmixed', sans-serif;
|
||||
font-family: "Mixcase Unmixed", sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import Header from '../components/Header';
|
||||
import { Outlet, useLocation } from 'react-router';
|
||||
import Footer from '../components/Footer';
|
||||
import clsx from 'clsx';
|
||||
import Header from "../components/Header";
|
||||
import { Outlet, useLocation } from "react-router";
|
||||
import Footer from "../components/Footer";
|
||||
import clsx from "clsx";
|
||||
|
||||
function DefaultLayout() {
|
||||
const { pathname } = useLocation();
|
||||
console.log(pathname);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'min-h-dvh flex flex-col select-none',
|
||||
pathname.endsWith('/about') ? 'bg-white' : 'bg-[#F3F3F2]'
|
||||
"min-h-dvh flex flex-col select-none",
|
||||
pathname.endsWith("/about") ? "bg-white" : "bg-[#F3F3F2]"
|
||||
)}
|
||||
>
|
||||
<Header />
|
||||
<div className='flex-1 flex flex-col justify-between'>
|
||||
<div className="flex-1 flex flex-col justify-between">
|
||||
<Outlet />
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
+320
-31
@@ -8,9 +8,14 @@ import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
|
||||
import UnitCard from "../components/UnitCard";
|
||||
import { useState } from "react";
|
||||
import { SORT_OPTIONS } from "../data/sortOptions";
|
||||
import SquaresIcon from "../components/icons/SQuaresIcon";
|
||||
import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
|
||||
import ArrowRightIcon from "../components/icons/ArrowRightIcon";
|
||||
import { motion } from "motion/react";
|
||||
import FilledHeartIcon from "../components/icons/FilledHeartIcon";
|
||||
|
||||
function FavoritesPage() {
|
||||
const { favoriteUnits } = useFavoritesUnitsStore();
|
||||
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
|
||||
|
||||
const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
|
||||
"Sort by ascending price"
|
||||
@@ -18,15 +23,21 @@ function FavoritesPage() {
|
||||
|
||||
const [selectedProject, setSelectedProject] = useState<string>();
|
||||
|
||||
const [viewMode, setViewMode] = useState<"Collection" | "Compare">("Compare");
|
||||
|
||||
const [removeSimilar, setRemoveSimilar] = useState(false);
|
||||
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 2xl:pb-[1.667vw] pb-6">
|
||||
<div
|
||||
className={clsx(
|
||||
"2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4",
|
||||
"2xl:px-[2.222vw] md:max-2xl:px-6 px-4"
|
||||
)}
|
||||
>
|
||||
<div className="2xl:space-y-[1.111vw] space-y-4">
|
||||
<div className="flex flex-col 2xl:gap-y-[1.111vw] gap-y-4">
|
||||
<p className="text-h2 font-medium">Favorites</p>
|
||||
<ProjectSelect
|
||||
projects={projects}
|
||||
@@ -36,42 +47,320 @@ function FavoritesPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="2xl:px-[2.222vw] md:max-2xl:px-6 px-4">
|
||||
<div className="flex 2xl:gap-[1.111vw] gap-4">
|
||||
<div className="2xl:px-[2.222vw] md:max-2xl:px-6 px-4 flex flex-col 2xl:gap-y-[1.667vw] gap-y-6">
|
||||
<div className="flex 2xl:gap-[1.111vw] gap-4 max-md:flex-col">
|
||||
<Select
|
||||
options={Object.keys(SORT_OPTIONS)}
|
||||
defaultOption={sort}
|
||||
onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
|
||||
className="2xl:w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
|
||||
className="2xl:w-[22.778vw] w-full"
|
||||
/>
|
||||
<Button variant="secondary" size="large">
|
||||
<div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6">
|
||||
<ChartIcon />
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="large"
|
||||
className="max-2xl:w-full"
|
||||
onClick={() =>
|
||||
setViewMode(viewMode === "Collection" ? "Compare" : "Collection")
|
||||
}
|
||||
>
|
||||
<div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6 2xl:[&_path]:stroke-[clamp(1.5px,0.104vw,2px)] [&_path]:stroke-[1.5px]">
|
||||
{viewMode === "Compare" ? <ChartIcon /> : <SquaresIcon />}
|
||||
</div>
|
||||
<p className="text-btn-l">Compare</p>
|
||||
<p className="text-btn-l">{viewMode}</p>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 py-6">
|
||||
{favoriteUnits
|
||||
.filter(
|
||||
(unit) => !selectedProject || unit.project === selectedProject
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (sort === "Sort by ascending price") {
|
||||
return a.salesPrice - b.salesPrice;
|
||||
} else if (sort === "Sort by descending price") {
|
||||
return b.salesPrice - a.salesPrice;
|
||||
} else if (sort === "Sort by ascending area") {
|
||||
return a.squareFt - b.squareFt;
|
||||
} else if (sort === "Sort by descending area") {
|
||||
return b.squareFt - a.squareFt;
|
||||
}
|
||||
return 0;
|
||||
})
|
||||
.map((unit) => (
|
||||
<UnitCard key={unit.id} unit={unit} />
|
||||
))}
|
||||
</div>
|
||||
{viewMode === "Collection" ? (
|
||||
<div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4">
|
||||
{favoriteUnits
|
||||
.filter(
|
||||
(unit) => !selectedProject || unit.project === selectedProject
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (sort === "Sort by ascending price") {
|
||||
return a.salesPrice - b.salesPrice;
|
||||
} else if (sort === "Sort by descending price") {
|
||||
return b.salesPrice - a.salesPrice;
|
||||
} else if (sort === "Sort by ascending area") {
|
||||
return a.squareFt - b.squareFt;
|
||||
} else if (sort === "Sort by descending area") {
|
||||
return b.squareFt - a.squareFt;
|
||||
}
|
||||
return 0;
|
||||
})
|
||||
.map((unit) => (
|
||||
<UnitCard key={unit.id} unit={unit} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="2xl:rounded-[1.667vw] rounded-3xl 2xl:p-[2.222vw] md:max-2xl:p-[clamp(24px,3.125vw,32px)] p-[clamp(16px,4.444vw,24px)] bg-white flex flex-col 2xl:gap-[1.111vw] gap-4 relative overflow-hidden">
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
onlyIcon
|
||||
className="!bg-[#F3F3F2]"
|
||||
onClick={() => {
|
||||
setCurrent(Math.max(current - 1, 0));
|
||||
}}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
|
||||
<ArrowLeftIcon />
|
||||
</span>
|
||||
</Button>
|
||||
<div className="flex 2xl:gap-[0.556vw] gap-2 items-center">
|
||||
<div
|
||||
className="2xl:w-[2.778vw] w-10 2xl:p-[0.139vw] p-0.5 rounded-full bg-[#E2E2DC] cursor-pointer"
|
||||
onClick={() => setRemoveSimilar((prev) => !prev)}
|
||||
>
|
||||
<motion.div
|
||||
className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 rounded-full bg-white"
|
||||
animate={{
|
||||
x: removeSimilar ? "80%" : 0,
|
||||
}}
|
||||
transition={{ bounce: 0, duration: 0.15 }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-s">
|
||||
Remove similar
|
||||
<span className="max-md:hidden"> parameters</span>
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onlyIcon
|
||||
className="!bg-[#F3F3F2]"
|
||||
onClick={() => {
|
||||
setCurrent(
|
||||
Math.min(current + 1, favoriteUnits.length * 6 - 1)
|
||||
);
|
||||
}}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
|
||||
<ArrowRightIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
<hr className="border-[#E2E2DC] 2xl:border-t-[0.069vw] border-t" />
|
||||
<div
|
||||
className="flex 2xl:gap-[2.222vw] md:max-2xl:gap-[clamp(24px,3.125vw,32px)] gap-[clamp(16px,4.444vw,24px)] transition-transform"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((25% + 2.222vw / 4) * ${-current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((50% + clamp(12px, 1.5625vw, 16px)) * ${-current}))`
|
||||
: `translateX(calc((50% + clamp(8px, 2.222vw, 12px)) * ${-current}))`,
|
||||
}}
|
||||
>
|
||||
{favoriteUnits
|
||||
.concat(favoriteUnits)
|
||||
.concat(favoriteUnits)
|
||||
.concat(favoriteUnits)
|
||||
.concat(favoriteUnits)
|
||||
.concat(favoriteUnits)
|
||||
.map((unit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group flex-shrink-0 2xl:w-[calc(25%-3*2.222vw/4)] md:max-2xl:w-[calc(50%-clamp(12px,1.5625vw,16px))] w-[calc(50%-clamp(8px,2.222vw,12px))] 2xl:space-y-[3.889vw] md:max-2xl:space-y-[7.292vw] space-y-[11.111vw]"
|
||||
>
|
||||
<div className="2xl:p-[1.111vw] 2xl:pt-[0.556vw] md:max-2xl:p-4 md:max-2xl:pt-2 p-3 flex flex-col 2xl:gap-[0.556vw] gap-2 2xl:rounded-[1.111vw] rounded-2xl bg-[#F3F3F2] 2xl:aspect-[310/334] md:max-2xl:aspect-[320/334] aspect-[144/158]">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="md:text-s text-caption-m">
|
||||
{unit.unitType}
|
||||
<span className="max-md:hidden">
|
||||
{`, ${unit.squareFt.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 2,
|
||||
})} Sqft`}
|
||||
</span>
|
||||
</p>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onlyIcon
|
||||
className="!bg-[#F3F3F2]"
|
||||
onClick={() =>
|
||||
setFavoriteUnits(
|
||||
favoriteUnits.filter((u) => u.id !== unit.id)
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
||||
<FilledHeartIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="2xl:space-y-[1.25vw] md:max-2xl:space-y-[3.385vw] space-y-[4.444vw]">
|
||||
<div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
|
||||
<div
|
||||
className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform group-not-first:opacity-0"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((100% + 2.222vw) * ${current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
|
||||
: `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
|
||||
}}
|
||||
>
|
||||
<p className="opacity-40 text-caption-s">Price</p>
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />
|
||||
</div>
|
||||
|
||||
<p className="md:text-m text-caption-m text-[#00BED7]">{`AED ${Intl.NumberFormat(
|
||||
"ar-AE",
|
||||
{
|
||||
currency: "AED",
|
||||
minimumFractionDigits: 0,
|
||||
}
|
||||
).format(unit.salesPrice)}`}</p>
|
||||
</div>
|
||||
|
||||
<div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
|
||||
<div
|
||||
className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((100% + 2.222vw) * ${current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
|
||||
: `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
|
||||
}}
|
||||
>
|
||||
<p className="group-first:block hidden opacity-40 text-caption-s">
|
||||
Total area
|
||||
</p>
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />
|
||||
</div>
|
||||
<p className="md:text-m text-caption-m">{`${unit.squareFt.toLocaleString(
|
||||
undefined,
|
||||
{
|
||||
maximumFractionDigits: 2,
|
||||
}
|
||||
)} Sqft`}</p>
|
||||
</div>
|
||||
<div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
|
||||
<div
|
||||
className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((100% + 2.222vw) * ${current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
|
||||
: `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
|
||||
}}
|
||||
>
|
||||
<p className="group-first:block hidden opacity-40 text-caption-s">
|
||||
Suite area
|
||||
</p>
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />
|
||||
</div>
|
||||
<p className="md:text-m text-caption-m">{`${unit.suitsArea.toLocaleString(
|
||||
undefined,
|
||||
{
|
||||
maximumFractionDigits: 2,
|
||||
}
|
||||
)} Sqft`}</p>
|
||||
</div>
|
||||
<div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
|
||||
<div
|
||||
className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((100% + 2.222vw) * ${current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
|
||||
: `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
|
||||
}}
|
||||
>
|
||||
<p className="group-first:block hidden opacity-40 text-caption-s">
|
||||
Balcony area
|
||||
</p>
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
|
||||
</div>
|
||||
<p className="md:text-m text-caption-m">{`${unit.balconyArea.toLocaleString(
|
||||
undefined,
|
||||
{
|
||||
maximumFractionDigits: 2,
|
||||
}
|
||||
)} Sqft`}</p>
|
||||
</div>
|
||||
<div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
|
||||
<div
|
||||
className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((100% + 2.222vw) * ${current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
|
||||
: `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
|
||||
}}
|
||||
>
|
||||
<p className="group-first:block hidden opacity-40 text-caption-s">
|
||||
Project
|
||||
</p>
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
|
||||
</div>
|
||||
<p className="md:text-[#00BED7] text-caption-m text-nowrap">
|
||||
{unit.project}
|
||||
</p>
|
||||
</div>
|
||||
<div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
|
||||
<div
|
||||
className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((100% + 2.222vw) * ${current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
|
||||
: `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
|
||||
}}
|
||||
>
|
||||
<p className="group-first:block hidden opacity-40 text-caption-s">
|
||||
Number
|
||||
</p>
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
|
||||
</div>
|
||||
<p className="md:text-m text-caption-m">
|
||||
{unit.unitNo}
|
||||
</p>
|
||||
</div>
|
||||
{/* section */}
|
||||
<div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
|
||||
<div
|
||||
className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
|
||||
style={{
|
||||
transform:
|
||||
innerWidth >= 1440
|
||||
? `translateX(calc((100% + 2.222vw) * ${current}))`
|
||||
: innerWidth >= 768
|
||||
? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
|
||||
: `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
|
||||
}}
|
||||
>
|
||||
<p className="group-first:block hidden opacity-40 text-caption-s">
|
||||
Floor
|
||||
</p>
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
|
||||
<hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
|
||||
</div>
|
||||
<p className="md:text-m text-caption-m">
|
||||
Floor {unit.floor}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button size="large" className="w-full">
|
||||
Book
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user