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