upd
This commit is contained in:
@@ -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({
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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]">
|
||||
|
||||
@@ -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,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,
|
||||
|
||||
@@ -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
@@ -25,7 +25,7 @@ const route = createBrowserRouter([
|
||||
element: <UnitTypesPage />,
|
||||
},
|
||||
{
|
||||
path: "/unit-types/:unitType",
|
||||
path: "/unit-types/:unitTypeSlug",
|
||||
element: <UnitTypeItemPage />,
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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,5 +1,6 @@
|
||||
export default interface UnitType {
|
||||
name: string;
|
||||
slug: string;
|
||||
img: string;
|
||||
wings?: string;
|
||||
floors: string;
|
||||
|
||||
Reference in New Issue
Block a user