You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

101 lines
3.2 KiB

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import {publicApi} from '../../../redux/actions';
import { useNavigate } from "react-router-dom";
import SignUp from "../SignUp";
import Button from "../../../components/Button";
//assets
import logoIcon from "../SignUp/assets/logo.svg";
import bgImage from "./bg.svg";
import arrowIcon from "./back.svg";
export const Desktop = ({setHeaderOptions}) => {
const [phase, setPhase] = useState("manage");
const navigate = useNavigate();
useEffect(() => {
setHeaderOptions({show: false});
},[]);
const UserMangement = () => {
return (
<div
className={`flex flex-col items-center justify-center w-full relative h-full transform transition-all duration-700 ${
phase !== "manage" ? "translate-x-full" : ""
}`}
>
<img
src={logoIcon}
alt=""
className="w-20 absolute left-1/2 top-10 transform -translate-x-1/2"
/>
<strong className="text-2xl text-blueC0 self-start tracking-tighter">
ورود یا ثبت نام
</strong>
<p className="text-tiny self-start text-gray-500 mt-6 leading-6">
کاربر گرامی لطفا یکی از دوگزینه زیر را انتخاب نمائید.
<br /> درصورتی که عضو نیستید روی دکمه ثبت نام بزنید
</p>
<div className="mt-16 flex flex-col gap-4 w-full">
<Button
title="ثبت نام"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
onClick={() => setPhase("signup")}
/>
<Button
title="ورود"
backgroundColor="bg-transparent border border-solid border-blueC0"
border={{ color: "", width: 1 }}
width="100%"
color="text-blueC0"
onClick={() => setPhase("login")}
/>
</div>
</div>
);
};
const phases = {
manage: <UserMangement />,
signup: <SignUp />,
login: <SignUp />,
};
return (
<div className="h-screen w-full flex justify-center items-center">
<div className="w-4/5 h-4/5 rounded-xl flex overflow-hidden border border-solid border-gray-200">
<div className="w-2/5 h-full flex justify-center items-center">
<div
className="w-4/5 flex justify-center items-center relative"
style={{ height: "90%" }}
>
<button
className="absolute left-0 top-0 p-3 bg-grayF4 rounded-xl z-20"
onClick={() =>
setPhase(() => (phase === "manage" ? navigate("/") : "manage"))
}
>
<img src={arrowIcon} />
</button>
{phases[phase]}
</div>
</div>
<div className="w-3/5 h-full bg-grayF9 flex justify-center items-center">
<img src={bgImage} alt="" className="w-4/5" />
</div>
</div>
</div>
);
};
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Desktop);