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
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);
|
|
|