Reza_ashrafi
3 years ago
parent
828301e428
commit
dc7e6b4fc1
15 changed files with 5492 additions and 48 deletions
|
After Width: | Height: | Size: 582 B |
|
After Width: | Height: | Size: 736 KiB |
@ -0,0 +1,94 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
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 = ({}) => { |
||||||
|
const [phase, setPhase] = useState("manage"); |
||||||
|
const navigate = useNavigate(); |
||||||
|
|
||||||
|
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 = {}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Desktop); |
||||||
Loading…
Reference in new issue