zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ivans

Browse Source
This commit is contained in:
zojgame
2024-06-13 15:04:22 +05:00
parent 453c287625
commit ce9f0f9171
7 changed files with 346 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/header/Auth/AuthDesktop.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import useModal from "../../../store/useModal";
import Button from "../../Button";
import AuthIcon from "../../icons/AuthIcon";
import LoginModal from "../../modals/LoginModal";
import LoginModal from "../../modals/auth/LoginModal";
interface AuthProps {
isAuth: boolean;
src/components/modals/auth/ContinueLoginModal.tsx
+94
View File
@@ -0,0 +1,94 @@
import { createRef, useLayoutEffect, useState, RefObject } from "react";
import useModal from "../../../store/useModal";
import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon";
import RegistrationModal from "./RegistrationModal";
const ContinueLoginModal = () => {
const { setModal } = useModal();
const [codeRefs, setCodeRefs] = useState<RefObject<HTMLInputElement>[]>([]);
const codeLength = 6;
useLayoutEffect(() => {
const refs = Array.from({ length: codeLength }).map(() =>
createRef<HTMLInputElement>()
);
setCodeRefs(refs);
}, []);
const handleOnCloseClick = () => {
setModal(null);
};
const handleOnCancelClick = () => {
setModal(<RegistrationModal />);
};
const handleOnCodeInput = (
refIndex: number,
e: React.ChangeEvent<HTMLInputElement>
) => {
const char = e.currentTarget.value;
const isNotEmpty = char !== "";
const isCountOne = char.length === 1;
if (refIndex < codeLength && isNotEmpty && isCountOne) {
codeRefs[refIndex + 1].current?.focus();
}
};
return (
<div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11 items-center">
<div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
<div className="w-full flex justify-between items-center border-b pb-6">
<h2 className="text-[#0D1922] text-subheadline-m font-semibold">
Enter the code
</h2>
<button onClick={handleOnCloseClick}>
<CrossIcon />
</button>
</div>
<div className="flex gap-1 pt-6 text-m text-[#0D1922B2]">
We`ve sent the code to <p className="text-[#0D1922] ">number</p>
</div>
<div className="grid grid-cols-6 gap-x-2 pt-6">
{codeRefs.map((ref, index) => (
<div className="h-12 bg-white rounded-lg flex items-center justify-center overflow-clip">
<input
onChange={(e) => handleOnCodeInput(index, e)}
ref={ref}
type="number"
className="input_number outline-transparent aspect-square w-full text-center"
/>
</div>
))}
<p className="col-span-2 text-caption-m text-[#00BED7] font-semibold pt-6 select-none cursor-pointer">
Resend code
</p>
<div className="pt-8 col-span-full flex gap-2">
<Button
text="Cancel"
className="justify-center w-full"
onClick={handleOnCancelClick}
/>
<Button
text="Login"
buttonType="cta"
className="justify-center w-full"
/>
</div>
<p className="text-caption-m font-semibold text-center col-span-full text-[#0D192266] pt-4">
By clicking on the button, you accept the{" "}
<a className="text-[#00BED7] cursor-pointer select-none">
privacy policy
</a>{" "}
and consent to the processing of personal data.
</p>
</div>
</div>
</div>
);
};
export default ContinueLoginModal;
src/components/modals/auth/ContinueRegistrationModal.tsx
+94
View File
@@ -0,0 +1,94 @@
import { createRef, useLayoutEffect, useState, RefObject } from "react";
import useModal from "../../../store/useModal";
import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon";
import RegistrationModal from "./RegistrationModal";
const ContinueRegistrationModal = () => {
const { setModal } = useModal();
const [codeRefs, setCodeRefs] = useState<RefObject<HTMLInputElement>[]>([]);
const codeLength = 6;
useLayoutEffect(() => {
const refs = Array.from({ length: codeLength }).map(() =>
createRef<HTMLInputElement>()
);
setCodeRefs(refs);
}, []);
const handleOnCloseClick = () => {
setModal(null);
};
const handleOnCancelClick = () => {
setModal(<RegistrationModal />);
};
const handleOnCodeInput = (
refIndex: number,
e: React.ChangeEvent<HTMLInputElement>
) => {
const char = e.currentTarget.value;
const isNotEmpty = char !== "";
const isCountOne = char.length === 1;
if (refIndex < codeLength && isNotEmpty && isCountOne) {
codeRefs[refIndex + 1].current?.focus();
}
};
return (
<div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11 items-center">
<div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
<div className="w-full flex justify-between items-center border-b pb-6">
<h2 className="text-[#0D1922] text-subheadline-m font-semibold">
Enter the code
</h2>
<button onClick={handleOnCloseClick}>
<CrossIcon />
</button>
</div>
<div className="flex gap-1 pt-6 text-m text-[#0D1922B2]">
We`ve sent the code to <p className="text-[#0D1922] ">number</p>
</div>
<div className="grid grid-cols-6 gap-x-2 pt-6">
{codeRefs.map((ref, index) => (
<div className="h-12 bg-white rounded-lg flex items-center justify-center overflow-clip">
<input
onChange={(e) => handleOnCodeInput(index, e)}
ref={ref}
type="number"
className="input_number outline-transparent aspect-square w-full text-center"
/>
</div>
))}
<p className="col-span-2 text-caption-m text-[#00BED7] font-semibold pt-6 select-none cursor-pointer">
Resend code
</p>
<div className="pt-8 col-span-full flex gap-2">
<Button
text="Cancel"
className="justify-center w-full"
onClick={handleOnCancelClick}
/>
<Button
text="Create account"
buttonType="cta"
className="justify-center w-full"
/>
</div>
<p className="text-caption-m font-semibold text-center col-span-full text-[#0D192266] pt-4">
By clicking on the button, you accept the{" "}
<a className="text-[#00BED7] cursor-pointer select-none">
privacy policy
</a>{" "}
and consent to the processing of personal data.
</p>
</div>
</div>
</div>
);
};
export default ContinueRegistrationModal;
src/components/modals/LoginModal.tsx → src/components/modals/auth/LoginModal.tsx
+27 -6
View File
@@ -1,14 +1,25 @@
import useModal from "../../store/useModal";
import Button from "../Button";
import MasterSelector from "../MasterSelector";
import CrossIcon from "../icons/CrossIcon";
import useModal from "../../../store/useModal";
import Button from "../../Button";
import MasterSelector from "../../MasterSelector";
import CrossIcon from "../../icons/CrossIcon";
import ContinueLoginModal from "./ContinueLoginModal";
import RegistrationModal from "./RegistrationModal";
const LoginModal = () => {
const { setModal } = useModal();
const handleOnCloseClick = () => {
setModal(null);
};
const handleOnCreateAccoutClick = () => {
setModal(<RegistrationModal />);
};
const handleOnLoginClick = () => {
setModal(<ContinueLoginModal />);
};
return (
<div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11 items-center">
<div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
@@ -22,11 +33,21 @@ const LoginModal = () => {
</div>
<div className="flex flex-col pt-6">
<MasterSelector title="Contact number" />
<div className="pt-8">
<Button
onClick={handleOnLoginClick}
text="Login"
buttonType="cta"
className="justify-center w-full"
/>
</div>
<Button text="Login" buttonType="cta" className="justify-center" />
<div className="font-semibold text-caption-m flex justify-center items-center text-[#0D192266] gap-1 pt-4">
Don`t have an account?{" "}
<p className="text-[#00BED7] select-none cursor-pointer">
<p
className="text-[#00BED7] select-none cursor-pointer"
onClick={handleOnCreateAccoutClick}
>
Create one
</p>
</div>
src/components/modals/auth/RegistrationModal.tsx
+81
View File
@@ -0,0 +1,81 @@
import useModal from "../../../store/useModal";
import Button from "../../Button";
import MasterInput from "../../MasterInput";
import MasterSelector from "../../MasterSelector";
import CrossIcon from "../../icons/CrossIcon";
import ContinueRegistrationModal from "./ContinueRegistrationModal";
import LoginModal from "./LoginModal";
const RegistrationModal = () => {
const { setModal } = useModal();
const handleOnCloseClick = () => {
setModal(null);
};
const handleOnLoginClick = () => {
setModal(<LoginModal />);
};
const handleOnContinueClick = () => {
setModal(<ContinueRegistrationModal />)
}
return (
<div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11 items-center">
<div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
<div className="w-full flex justify-between items-center border-b pb-6">
<h2 className="text-[#0D1922] text-subheadline-m font-semibold">
Create account
</h2>
<button onClick={handleOnCloseClick}>
<CrossIcon />
</button>
</div>
<div className="flex flex-col gap-4 pt-6">
<MasterInput title="Name" isRequired={true} placeholder="Name" />
<MasterInput
title="Company name"
isRequired={false}
placeholder="Company"
/>
<MasterInput
title="Email"
isRequired={false}
placeholder="sample@mail.com"
/>
<MasterSelector title="Contact number" />
</div>
<div className="pt-8">
<Button
onClick={handleOnContinueClick}
text="Continue"
buttonType="cta"
className="justify-center w-full"
/>
</div>
<div className="font-semibold text-caption-m flex justify-center items-center text-[#0D192266] gap-1 pt-4">
Already have an account?{" "}
<p
className="text-[#00BED7] select-none cursor-pointer"
onClick={handleOnLoginClick}
>
login
</p>
</div>
<div className="font-semibold text-caption-m text-[#0D192266] gap-1 pt-8 flex">
<p className="text-center">
By clicking on the button, you accept the and consent to the{" "}
<a className="text-[#00BED7] select-none cursor-pointer">
privacy policy{" "}
</a>{" "}
processing of personal data.
</p>
</div>
</div>
</div>
);
};
export default RegistrationModal;
src/components/multiRangeSlider.css
+1
View File
@@ -51,6 +51,7 @@
left: 50%;
transform: translate(-50%, 0);
}
.range-slider input[type="range"] {
-webkit-appearance: none;
pointer-events: none;
src/components/virtualTour/VirtualTourSidebar.tsx
+35 -19
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import useSphere from "../../store/useSphere";
import { IAppartmentSphere, ISphere } from "../../types/apartmentSphere";
import Button from "../Button";
@@ -7,6 +7,8 @@ import ChevronDownIcon from "../icons/ChevronDownIcon";
import HeartIcon from "../icons/Heart";
import MapVectorIcon from "../icons/MapVectorIcon";
import useCompass from "../../store/useCompass";
import LeftArrowIcon from "../icons/LeftArrowIcon";
import InfoIcon from "../icons/InfoIcon";
interface VirtualTourSidebarProps {
currentAppartment: null | IAppartmentSphere;
@@ -28,35 +30,43 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
<div className="absolute w-screen h-screen grid z-[99999999] pointer-events-none select-none">
<div className="h-screen py-[130px] px-3 w-[360px]">
<div className="bg-white w-full rounded-lg p-5 flex flex-col relative rounded-ee-none">
<div className="flex flex-col gap-1 pb-[18px] border-b">
<div className="flex items-center justify-between gap-1 pb-[18px] border-b">
<Button
icon={<LeftArrowIcon />}
buttonType="secondary"
className="w-fit"
/>
<p className="text-[#0D1922] font-semibold text-subheadline-s leading-6 text-right">
1 BR Squared, 609 Sqft
</p>
</div>
<div className="pt-3">
<div className="flex gap-2 items-center">
<div className="flex flex-col">
<p className="text-[#00BED7] text-caption-m font-medium">
Rove Home Marasi Drive{" "}
</p>
<div className="text-[#73787C] flex gap-2 items-center w-fit">
<div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
<p className="text-caption-m font-semibold leading-4">
East Wing
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">Floor 11</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">№ 213</p>
</div>
</div>
<div className="pt-3">
<div className="flex gap-2 items-center">
<div className="bg-[#00BED7] py-[3px] px-2 rounded-full text-white text-caption-m flex items-center h-[22px]">
234
</div>
<p className="text-[#0D1922] font-semibold text-subheadline-s leading-6">
1 bedroom appartment
<p className="text-caption-m font-semibold leading-4">
Floor 11
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
№ 213
</p>
</div>
</div>
</div>
<div
className={`transition-all duration-700 ease-in-out ${
!isActive ? "max-h-0 opacity-0" : "max-h-screen opacity-100"
}`}
>
<div className="my-4 relative">
<div className={`${isActive ? "my-4" : ""} relative`}>
<img src="/images/virtual-tour/studio1/map.jpg" alt="" />
<div
className="absolute"
@@ -82,16 +92,22 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
</div>
</div>
</div>
<div className="flex gap-2 pt-6">
<div className="flex flex-col">
<h2 className="text-subhealine-s font-semibold text-[#00BED7] pt-4">
AED 1,668,888
</h2>
<div className="flex gap-2 pt-4 ">
<Button
icon={<BookingIcon />}
text="Send Enquiry"
buttonType="cta"
className="flex-1 flex items-center justify-center"
/>
<Button icon={<InfoIcon />} buttonType="secondary" />
<Button icon={<HeartIcon />} buttonType="secondary" />
</div>
</div>
</div>
<div className="h-14 absolute -bottom-14 left-0 w-full flex justify-between">
<div className="flex gap-1 py-2 items-start flex-wrap pr-[9px]">
{currentAppartment &&
@@ -111,11 +127,11 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
);
})}
</div>
<div className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]">
<div
className="flex justify-center items-center gap-2"
onClick={handleOnShowClick}
className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]"
>
<div className="flex justify-center items-center gap-2">
<div className="relative">
<div
className={`transition-opacity duration-300 ${