This commit is contained in:
2025-05-21 12:38:14 +05:00
parent 057f77dce6
commit 2a1add765c
11 changed files with 61 additions and 35 deletions
+1 -1
View File
@@ -6,7 +6,7 @@ import CloseIcon from "./icons/CloseIcon";
import { useQuery } from "@tanstack/react-query";
import { api } from "../api/ky";
import IMarker from "../types/IMarker";
import { formattedUnitTypes } from "../data/unitTypes";
import { formattedUnitTypes } from "../data/formattedUnitTypes";
import { useNavigate } from "react-router";
function NewSelectedComplexCard({
+1 -1
View File
@@ -5,7 +5,7 @@ import HeartIcon from "./icons/HeartIcon";
import Button from "./ui/Button";
import "react-loading-skeleton/dist/skeleton.css";
import Skeleton from "react-loading-skeleton";
import { formattedUnitTypes } from "../data/unitTypes";
import { formattedUnitTypes } from "../data/formattedUnitTypes";
function UnitCard({ unit }: { unit: IUnit }) {
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
+1 -1
View File
@@ -4,7 +4,7 @@ import UnitType from "../types/UnitType";
function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
return (
<Link
to={`/unit-types/smth`}
to={`/unit-types/${type.slug}?project=${project}`}
className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw]"
>
<div className="space-y-1 2xl:space-y-[0.278vw]">
+11 -7
View File
@@ -6,9 +6,10 @@ interface UnitTypeItemProps {
title: string;
project: string;
wing?: string;
floor: [number, number];
floor: string;
video: { title: string; desc: string };
texts: [string, string];
area: string;
}
function UnitTypeItem({
@@ -18,6 +19,7 @@ function UnitTypeItem({
floor,
video,
texts,
area,
}: UnitTypeItemProps) {
return (
<div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
@@ -28,7 +30,7 @@ function UnitTypeItem({
<div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
<p className="font-medium md:text-h3 text-h4">{title}</p>
<p className="2xl:rounded-[1.667vw] rounded-3xl 2xl:px-[0.833vw] 2xl:py-[0.278vw] px-3 py-1 outline outline-[#E2E2DC] text-[#0D1922]/70 text-caption-m w-fit">
Up to 366 Sqft
{area}
</p>
</div>
<Button onlyIcon variant="secondary">
@@ -40,11 +42,13 @@ function UnitTypeItem({
<div className="2xl:space-y-[0.556vw] md:max-2xl:space-y-2 space-y-1">
<p className="text-m text-[#00BED7]">{project}</p>
<div className="flex items-center 2xl:gap-[0.556vw]">
<p className="text-s text-[#0D1922]/70 peer">{wing ?? ""}</p>
<div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC] peer-empty:hidden" />
<p className="text-s text-[#0D1922]/70">Floor 5-21</p>
<div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC] peer-empty:hidden" />
<p>{floor.join("-")}</p>
{wing && (
<>
<p className="text-s text-[#0D1922]/70">{wing}</p>
<div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
</>
)}
<p className="text-s text-[#0D1922]/70">{floor}</p>
</div>
</div>
<hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
+1 -1
View File
@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import clsx from "clsx";
import { formattedUnitTypes } from "../data/unitTypes";
import { formattedUnitTypes } from "../data/formattedUnitTypes";
function UnitTypesSelect({
unitTypes,
+10
View File
@@ -7,6 +7,7 @@ export const projects: Project[] = [
types: [
{
name: "Studio Flex",
slug: "studio-flex",
img: "/images/unit-types/marasi-drive/studio_flex.jpg",
wings: "West Wing",
floors: "Floor 5-21",
@@ -14,6 +15,7 @@ export const projects: Project[] = [
},
{
name: "Studio²",
slug: "studio-2",
img: "/images/unit-types/marasi-drive/studio_2.jpg",
wings: "East Wing / West Wing",
floors: "Floor 5-21 / 24-31",
@@ -21,6 +23,7 @@ export const projects: Project[] = [
},
{
name: "1 Bedroom² Type A",
slug: "1-bedroom-a",
img: "/images/unit-types/marasi-drive/1_bedroom_a.jpg",
wings: "West Wing",
floors: "Floor 5-31",
@@ -28,6 +31,7 @@ export const projects: Project[] = [
},
{
name: "1 Bedroom² Type B",
slug: "1-bedroom-b",
img: "/images/unit-types/marasi-drive/1_bedroom_b.jpg",
wings: "East Wing / West Wing",
floors: "Floor 5-31",
@@ -35,6 +39,7 @@ export const projects: Project[] = [
},
{
name: "1 Bedroom² Type C",
slug: "1-bedroom-c",
img: "/images/unit-types/marasi-drive/1_bedroom_c.jpg",
wings: "East Wing / West Wing",
floors: "Floor 5-31",
@@ -42,6 +47,7 @@ export const projects: Project[] = [
},
{
name: "1 Bedroom² Type D",
slug: "1-bedroom-d",
img: "/images/unit-types/marasi-drive/1_bedroom_d.jpg",
wings: "East Wing / West Wing",
floors: "Floor 5-21 / 24-31",
@@ -49,6 +55,7 @@ export const projects: Project[] = [
},
{
name: "2 Bedroom² Type A",
slug: "2-bedroom-a",
img: "/images/unit-types/marasi-drive/2_bedroom_a.jpg",
wings: "East Wing / West Wing",
floors: "Floor 5-31",
@@ -56,6 +63,7 @@ export const projects: Project[] = [
},
{
name: "2 Bedroom² Type B",
slug: "2-bedroom-b",
img: "/images/unit-types/marasi-drive/2_bedroom_b.jpg",
wings: "West Wing",
floors: "Floor 5-31",
@@ -69,12 +77,14 @@ export const projects: Project[] = [
types: [
{
name: "Studio Flex",
slug: "studio-flex",
img: "/images/unit-types/dubai-marina/studio_flex.jpg",
floors: "Floor 1-10",
area: "350-400 Sqft",
},
{
name: "Studio²",
slug: "studio-2",
img: "/images/unit-types/dubai-marina/studio_2.jpg",
floors: "Floor 1-10",
area: "350-400 Sqft",
+1 -1
View File
@@ -25,7 +25,7 @@ const route = createBrowserRouter([
element: <UnitTypesPage />,
},
{
path: "/unit-types/:unitType",
path: "/unit-types/:unitTypeSlug",
element: <UnitTypeItemPage />,
},
{
+1 -1
View File
@@ -15,7 +15,7 @@ import { motion } from "motion/react";
import FilledHeartIcon from "../components/icons/FilledHeartIcon";
import { useSwipeable } from "react-swipeable";
import { useNavigate } from "react-router";
import { formattedUnitTypes } from "../data/unitTypes";
import { formattedUnitTypes } from "../data/formattedUnitTypes";
function FavoritesPage() {
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
+33 -22
View File
@@ -1,14 +1,42 @@
import { useNavigate, useParams, useSearchParams } from "react-router";
import UnitTypeItem from "../components/UnitTypeItem";
import ApartmentItem from "./ApartmentItem";
import { useEffect, useState } from "react";
import { projects } from "../data/projects";
import Project from "../types/Project";
function UnitTypeItemPage() {
const { unitTypeSlug } = useParams<{ unitTypeSlug: string }>();
const [searchParams] = useSearchParams();
const [unitType, setUnitType] = useState<Project["types"][number]>();
useEffect(() => {
if (!unitTypeSlug || !searchParams.has("project")) return;
setUnitType(
projects
.find(({ title }) => title === searchParams.get("project"))
?.types.find(({ slug }) => slug === unitTypeSlug)
);
}, [searchParams, unitTypeSlug]);
const navigate = useNavigate();
useEffect(() => {
window.scrollTo(0, 0);
if (!searchParams.has("project")) navigate("/unit-types");
}, [navigate, searchParams]);
if (!unitType) return <div>Unit type not found</div>;
return (
<div>
<UnitTypeItem
project="Rove Home Marasi Drive"
title="Studio Flex"
floor={[5, 21]}
wing="East Wing"
project={searchParams.get("project")!}
title={unitType!.name}
area={unitType!.area}
floor={unitType!.floors}
wing={unitType!.wings}
texts={[
"In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
"Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
@@ -18,23 +46,6 @@ function UnitTypeItemPage() {
desc: "Live in the future, today",
}}
/>
<ApartmentItem
project="Rove Home Marasi Drive"
title="Studio² — Type A"
floor={11}
wing="East Wing"
number="E-503"
sqft={607.08}
suite={485.67}
balcony={121.42}
price={1668888}
status="Available"
parkingSpace={1}
video={{
title: "ORI Cloud Bed",
desc: "Live in the future, today",
}}
/>
</div>
);
}
+1
View File
@@ -1,5 +1,6 @@
export default interface UnitType {
name: string;
slug: string;
img: string;
wings?: string;
floors: string;