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

started refactoring unit slider

Browse Source
This commit is contained in:
Lanskikh
2025-08-01 16:47:39 +05:00
parent 2c865b877b
commit 62f9a19b19
14 changed files with 278 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NewUnitSlider.tsx
+93
View File
@@ -0,0 +1,93 @@
import React, { type PropsWithChildren, useState } from "react";
import Button from "./ui/Button";
import { useSwipeable } from "react-swipeable";
import { motion } from "motion/react";
interface SliderItemProps {
text: string;
}
function flattenChildren(children: React.ReactNode): React.ReactElement[] {
const result: React.ReactElement[] = [];
React.Children.forEach(children, (child) => {
if (React.isValidElement(child)) {
if (child.type === React.Fragment) {
result.push(
...flattenChildren(
(child.props as { children?: React.ReactNode }).children
)
);
} else {
result.push(child);
}
}
});
return result;
}
function NewUnitSlider({ children }: PropsWithChildren) {
const [currentSlide, setCurrentSlide] = useState(0);
const flattenedChildren = flattenChildren(children);
const slides = flattenedChildren.map((child, index) => {
if (React.isValidElement<SliderItemProps>(child) && child.props.text) {
return {
index,
text: child.props.text,
element: child,
};
}
return {
index,
text: `Slide ${index + 1}`,
element: child,
};
});
const handlers = useSwipeable({
onSwipedLeft: () =>
setCurrentSlide(Math.min(currentSlide + 1, slides.length - 1)),
onSwipedRight: () => setCurrentSlide(Math.max(currentSlide - 1, 0)),
preventScrollOnSwipe: true,
touchEventOptions: {
passive: false,
},
trackMouse: true,
});
return (
<div
className="relative w-full h-full overflow-hidden bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-xl group"
{...handlers}
>
<motion.div
animate={{
x: `calc(-${currentSlide} * 100%)`,
}}
transition={{
duration: 0.5,
ease: "easeInOut",
}}
className="flex relative top-0 w-full h-full"
>
{slides.map((slide) => slide.element)}
</motion.div>
<div className="absolute flex 2xl:gap-[0.278vw] gap-1 items-center 2xl:bottom-[1.667vw] md:max-2xl:bottom-6 bottom-4 left-1/2 -translate-x-1/2">
{slides.map((slide, index) => (
<Button
key={slide.text}
variant={currentSlide === index ? "cta" : "secondary"}
onClick={() => setCurrentSlide(index)}
className="max-md:hidden"
>
{slide.text}
</Button>
))}
</div>
</div>
);
}
export default NewUnitSlider;
src/components/PopupContainer.tsx
+2 -2
View File
@@ -65,9 +65,9 @@ function PopupContainer() {
side === "right" &&
"top-1/2 [y:-50%] right-full [x:1px] [rotate:180deg]",
side === "top" &&
"left-1/2 [x:100%] top-full [y:1px] [rotate:90deg] origin-top-left",
"left-1/2 [x:100%] absolute top-full [y:1px] [rotate:90deg] origin-top-left",
side === "bottom" &&
"left-1/2 [x:100%] bottom-full [y:1px] [rotate:-90deg] origin-bottom-left"
"left-1/2 [x:100%] absolute bottom-full [y:1px] [rotate:-90deg] origin-bottom-left"
)}
/>
</motion.div>
src/components/UnitCard.tsx
+2 -2
View File
@@ -43,9 +43,9 @@ function UnitCard({ unit }: { unit: Unit }) {
<Link
target="_blank"
to={`/complex/${complexNameToSlug(unit.project)}/${unit.unitNo}`}
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[1.111vw] space-y-4 bg-white hover:-translate-y-2 transition-[translate,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[1.111vw] space-y-4 bg-white hover:-translate-y-2 transition-[transform,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
>
<div className="flex items-center justify-between">
<div className="flex justify-between items-center">
<div className="2xl:space-y-[0.278vw] space-y-1">
<p className="text-s text-[#00BED7]">
{unit.project || <Skeleton />}
src/components/UnitImageWithSides.tsx
+19
View File
@@ -0,0 +1,19 @@
import UnitTypeImageWithMarkers from "./UnitTypeImageWithMarkers";
interface UnitImageWithSidesProps {
unitTypeVariant: string;
}
function UnitImageWithSides({ unitTypeVariant }: UnitImageWithSidesProps) {
return (
<div className="">
<UnitTypeImageWithMarkers
complexName={""}
legend={[]}
unitTypeVariant={unitTypeVariant}
/>
</div>
);
}
export default UnitImageWithSides;
src/components/UnitSlider.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) {
duration: 0.5,
ease: "easeInOut",
}}
className="flex h-full w-full relative top-0"
className="flex relative top-0 w-full h-full"
>
{isLoft ? (
<>
src/components/UnitSliderItem.tsx
+11
View File
@@ -0,0 +1,11 @@
import { PropsWithChildren } from "react";
interface UnitSliderItemProps {
text: string;
}
function UnitSliderItem({ children }: PropsWithChildren<UnitSliderItemProps>) {
return <div className="flex-shrink-0 w-full">{children}</div>;
}
export default UnitSliderItem;
src/components/UnitTypeImageWithMarkers.tsx
+1 -18
View File
@@ -5,8 +5,7 @@ function UnitTypeImageWithMarkers({
legend,
floor,
unitTypeVariant,
}: // unitNumber,
{
}: {
complexName: string;
legend: {
name: string;
@@ -16,29 +15,15 @@ function UnitTypeImageWithMarkers({
}[];
floor?: "lower" | "upper";
unitTypeVariant: string;
// unitNumber: string;
}) {
const refRect = useRef<SVGRectElement>(null);
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
// Фильтруем legend по floor
const filteredLegend = legend.filter((item) => {
// Если у элемента нет поля floor, показываем всегда
if (!item.floor) return true;
// Если у элемента есть поле floor, показываем только если оно совпадает с переданным floor
return item.floor === floor;
});
// const [unitTypeVariant, setUnitTypeVariant] = useState<string>();
// useEffect(() => {
// setUnitTypeVariant(
// complexName === "dubai-marina"
// ? getUnitTypeVariantDubaiMarina(unitNumber, floor)
// : getUnitTypeVariantMarasiDrive(unitNumber)
// );
// }, [complexName, unitNumber, floor]);
return (
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -72,7 +57,6 @@ function UnitTypeImageWithMarkers({
isolation: "isolate",
}}
/>
{/* Рендерим сначала все маркеры */}
{filteredLegend.map((item, index) => (
<rect
key={`marker-${index}`}
@@ -87,7 +71,6 @@ function UnitTypeImageWithMarkers({
onMouseLeave={() => setHoveredIndex(null)}
/>
))}
{/* Затем рендерим все тултипы поверх маркеров */}
{filteredLegend.map((item, index) => (
<g
key={`tooltip-${index}`}
src/components/UnitTypeItem.tsx
+44 -5
View File
@@ -2,11 +2,12 @@ import ShareIcon from "./icons/ShareIcon";
import Button from "./ui/Button";
import Project from "../types/Project";
import UnitType from "../types/UnitType";
// import { useNavigate } from "react-router";
import PlayIcon from "./icons/PlayIcon";
import VideoModal from "./VideoModal";
import useModalStore from "../stores/useModalStore";
import UnitSlider from "./UnitSlider";
import UnitSliderItem from "./UnitSliderItem";
import NewUnitSlider from "./NewUnitSlider";
import UnitTypeImageWithMarkers from "./UnitTypeImageWithMarkers";
interface UnitTypeItemProps {
project: Project;
@@ -14,8 +15,6 @@ interface UnitTypeItemProps {
}
function UnitTypeItem({ project, type }: UnitTypeItemProps) {
// const navigate = useNavigate();
function handleShare() {
navigator.share({
title: type.name,
@@ -27,7 +26,47 @@ function UnitTypeItem({ project, type }: 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">
<UnitSlider unitTypeVariant={type.slug} complexName={project.slug} />
<NewUnitSlider>
{type.slug.includes("-loft") ? (
<>
<UnitSliderItem text="Lower">
<UnitTypeImageWithMarkers
complexName={project.slug}
legend={type.legend || []}
floor="lower"
unitTypeVariant={type.slug + "-lower-left"}
/>
</UnitSliderItem>
<UnitSliderItem text="Upper">
<UnitTypeImageWithMarkers
complexName={project.slug}
legend={type.legend || []}
floor="upper"
unitTypeVariant={type.slug + "-upper-left"}
/>
</UnitSliderItem>
</>
) : (
<UnitSliderItem text="Layout">
<UnitTypeImageWithMarkers
complexName={project.slug}
legend={type.legend || []}
unitTypeVariant={type.slug + "-left"}
/>
</UnitSliderItem>
)}
<UnitSliderItem text="Interior">
<img
src={`/images/interiors/${project.slug}/${
project.slug === "marasi-drive"
? type.slug.split("-").slice(0, -1).join("-")
: type.slug
}.png`}
alt=""
className="object-cover h-full pointer-events-none 2xl:rounded-[1.111vw] rounded-2xl"
/>
</UnitSliderItem>
</NewUnitSlider>
<div className="flex flex-col justify-between 2xl:w-[21.944vw] flex-shrink-0">
<div className="2xl:space-y-[1.667vw] space-y-6">
<div className="flex justify-between items-start">
src/components/ui/Select.tsx
+1 -1
View File
@@ -98,7 +98,7 @@ function Select({
exit={{ opacity: 0 }}
transition={{ duration: 0.15 }}
ref={dropdownRefCallback}
className="absolute 2xl:mt-[0.278vw] 2xl:pt-[0.278vw] mt-1 p-1 2xl:space-y-[0.139vw] space-y-0.5 shadow-[0px_2px_8px_rgba(0,0,0,0.15)] overflow-auto rounded-xl bg-white w-full z-1"
className="absolute 2xl:mt-[0.278vw] 2xl:pt-[0.278vw] mt-1 p-1 2xl:space-y-[0.139vw] space-y-0.5 shadow-[0px_2px_8px_rgba(0,0,0,0.15)] overflow-auto rounded-xl bg-white w-full z-[1]"
>
{options.map((option, index) => (
<button