inmake/irth-new-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
Lanskikh
2025-05-21 20:14:31 +05:00
parent 42aaaa7aea
commit e3500e49c9
7 changed files with 102 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FloorPopup.tsx
+69 -8
View File
@@ -8,7 +8,7 @@ interface FloorMarkerProps {
function FloorPopup({ title, position }: FloorMarkerProps) {
return (
<AnimatePresence mode="wait">
<AnimatePresence>
{title && (
<motion.div
key={title}
@@ -16,20 +16,28 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
style={{ top: position[1], left: position[0] }}
className="absolute 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-full"
className="absolute z-100 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-x-[calc(100%+1.25vw)] -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen"
>
<div className="2xl:space-y-[0.556vw]">
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="font-medium text-h5">{title}</p>
<p>{}</p>
<p className="font-medium text-h5">
{!Number.isNaN(+title)
? title
: `${title.split(" ").at(-1)} floor`}
</p>
{!Number.isNaN(+title.split(" ").at(-1)!) && (
<p className="text-[#0D1922]/40 text-s">
{title.split(" ")[0]} Wing
</p>
)}
</div>
<div className="flex 2xl:gap-[0.278vw] gap-1">
<p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s text-[#0D1922]/70">
{title && !Number.isNaN((+title!.split(" ").at(-1)!)!)
{title && Number.isNaN((+title!.split(" ").at(-1)!)!)
? "16 Amenties"
: `${title?.split(" ").at(-1)} floor`}
: `8 apartments`}
</p>
{Number.isNaN(+title!) && (
{!Number.isNaN(+title.split(" ").at(-1)!) && (
<div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216]/8 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
<span className="2xl:w-[0.833vw] 2xl:h-[0.833vw] w-3 h-3 text-[#30B216]">
<HumanIcon />
@@ -40,9 +48,62 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
</div>
<hr className="border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
<div className="2xl:space-y-[0.556vw]">
<div className="flex"></div>
{!Number.isNaN(+title.split(" ").at(-1)!) ? (
<>
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
4
</p>
<p className="text-caption-m text-[#0D1922]/70">
Studio Flex
</p>
</div>
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
4
</p>
<p className="text-caption-m text-[#0D1922]/70">Studio²</p>
</div>
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
4
</p>
<p className="text-caption-m text-[#0D1922]/70">
1 Bedroom²
</p>
</div>
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
2
</p>
<p className="text-caption-m text-[#0D1922]/70">
2 Bedroom²
</p>
</div>
</>
) : (
<>
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
8
</p>
<p className="text-caption-m text-[#0D1922]/70">
Indoor Amenties
</p>
</div>
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
8
</p>
<p className="text-caption-m text-[#0D1922]/70">
Outdoor Amenties
</p>
</div>
</>
)}
</div>
</div>
<div className="absolute w-0 h-0 border-[7px_0px_7px_8px] [border-color:_transparent_transparent_transparent_#fff] top-1/2 left-full" />
</motion.div>
)}
</AnimatePresence>
src/components/Footer.tsx
+8 -7
View File
@@ -25,7 +25,7 @@ function Footer() {
const { setModal } = useModalStore();
return (
<footer className="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"
@@ -96,25 +96,26 @@ function Footer() {
</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 justify-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2">
<Link
to={"/favorites"}
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70 relative"
className="md:text-btn-l text-btn-m content-center md:my-4 my-[13px] text-[#0D1922]/70 relative flex-1"
>
Favorites
{!!favoriteUnits.length && (
<div className="absolute top-0 right-0 translate-x-full max-2xl:-translate-y-full rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s">
<div className="absolute top-0 right-0 translate-x-full max-2xl:-translate-y-full rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s font-mono">
{favoriteUnits.length}
</div>
)}
</Link>
<Link
to={"/search"}
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
className="md:text-btn-l text-btn-m content-center md:my-4 my-[13px] text-[#0D1922]/70 flex-1"
>
Search
</Link>
<div ref={ref}>
<div className="2xl:!py-[17px] !py-[13px] flex-1"></div>
{/* <div ref={ref}>
<Button
variant="tertiary"
size="large"
@@ -169,7 +170,7 @@ function Footer() {
</motion.div>
)}
</AnimatePresence>
</div>
</div> */}
</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]">
src/components/Header.tsx
+5 -7
View File
@@ -80,9 +80,7 @@ function Header() {
</span>
</Button>
</div>
<div className="flex justify-end flex-1">
<ProfileBar />
</div>
<div className="flex justify-end flex-1">{/* <ProfileBar /> */}</div>
</header>
<AnimatePresence mode="wait">
{opened && (
@@ -216,7 +214,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
>
{title}
{title === "Favorites" && !!favoriteUnits.length && (
<div className="absolute 2xl:top-0 2xl:right-0 top-0.5 right-0.5 rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s text-center">
<div className="absolute 2xl:top-0 2xl:right-0 top-0.5 right-0.5 rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s text-center font-mono">
{favoriteUnits.length}
</div>
)}
@@ -260,9 +258,9 @@ function BrochuresDropdown() {
<AnimatePresence>
{opened && (
<motion.div
initial={{ opacity: 0, x: "100%" }}
animate={{ opacity: 1, x: "0%" }}
exit={{ opacity: 0, x: "100%" }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ bounce: 0, duration: 0.3 }}
className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[44.028vw] w-[32.222vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
>
src/components/ModalContainer.tsx
+3 -3
View File
@@ -44,9 +44,9 @@ function ModalContainer() {
{modal && (
<motion.div
ref={rootRef}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
// initial={{ opacity: 0 }}
// animate={{ opacity: 1 }}
// exit={{ opacity: 0 }}
className="h-full"
>
<div
src/components/SearchFilters.tsx
+4
View File
@@ -403,6 +403,10 @@ function SearchFilters({
window.scroll({ top: 0, behavior: "smooth" });
}
useEffect(() => {
resetFilters();
}, [project]);
return (
<>
{inModal && (
src/pages/FavouritesPage.tsx
+6 -6
View File
@@ -110,7 +110,7 @@ function FavoritesPage() {
</Button>
</div>
{filteredFavoriteUnits.length === 0 ? (
<div className="2xl:aspect-[1376/396] md:max-2xl:aspect-[720/808] aspect-[328/240] flex justify-center items-center">
<div className="2xl:aspect-[1376/396] md:max-2xl:aspect-[720/808]a md:max-2xl:py-20 max-md:aspect-[328/240] flex justify-center items-center">
<div className="flex flex-col 2xl:gap-[2.778vw] gap-10 items-center">
<div className="flex flex-col 2xl:gap-[1.111vw] gap-4 items-center">
<p className="text-h3 font-medium text-[#00BED7] text-center">
@@ -166,7 +166,10 @@ function FavoritesPage() {
</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"
className={clsx(
"2xl:w-[2.778vw] w-10 2xl:p-[0.139vw] p-0.5 rounded-full cursor-pointer transition-colors",
removeSimilar ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
)}
onClick={() => setRemoveSimilar((prev) => !prev)}
>
<motion.div
@@ -177,10 +180,7 @@ function FavoritesPage() {
transition={{ bounce: 0, duration: 0.15 }}
/>
</div>
<p className="text-s">
Remove similar
<span className="max-md:hidden"> parameters</span>
</p>
<p className="text-s">Only differing</p>
</div>
<Button
onlyIcon
src/pages/SearchPage.tsx
+7 -2
View File
@@ -162,7 +162,12 @@ function SearchPage() {
setInModal={setFiltersInModal}
{...{ area, cost, floor, setArea, setCost, setFloor }}
/>
<div className="2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4">
<div
className="2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4"
style={
filtersInModal ? { marginTop: filtersRef.current?.clientHeight } : {}
}
>
<Select
options={Object.keys(SORT_OPTIONS)}
defaultOption={sort}
@@ -234,7 +239,7 @@ function SearchPage() {
</span>
<span className="text-caption-m">Filters</span>
{!!activeFiltersCount && (
<div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7] flex justify-center items-center">
<div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 h-4 text-caption-s bg-white text-[#00BED7] flex justify-center items-center font-mono ring ring-[#E2E2DC]">
{activeFiltersCount}
</div>
)}