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