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.

139 lines
6.6 KiB

3 years ago
import React, {useEffect, useState, useRef} from "react";
import { Link } from "react-router-dom";
import logo from "../../assets/img/big-logo.svg";
3 years ago
import firstPic from '../../assets/img/undraw_professor_-8-lrt.svg';
import secondPic from '../../assets/img/undraw_quiz_nlyh.svg';
import thirdPic from '../../assets/img/undraw_certificate_re_yadi.svg';
import { Slide } from 'react-slideshow-image';
import './index.css';
const LoginSignUp = ({ activeLogin }) => {
3 years ago
const [index, setIndex] = useState(0);
const timeoutRef = useRef(null);
function resetTimeout() {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
}
useEffect(() => {
resetTimeout();
timeoutRef.current = setTimeout(
() =>
setIndex((prevIndex) =>
prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1
),
delay
);
return () => {
resetTimeout();
};
}, [index]);
const slideContents = [
{
id:0,
image: firstPic,
title: 'یک معلم دیوانه در کمین شما نشسته است مراقب باشید' ,
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},
{
id:1,
image: secondPic,
title: 'یک آزمون سخت و افتضاح در راه هست!' ,
description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ',
},
{
id:1,
image: thirdPic,
title: 'یک اسلاید عجیب غریب دیگر در راه هست' ,
description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ',
},
];
const delay = 2500;
return (
3 years ago
<div className="w-full flex items-center justify-center" style={{ height: '100vh', direction: 'rtl' }}>
<div className="w-3/4 border border-solid border-gray-200 flex rounded-xl">
{/* form */}
<div className="flex w-2/5 border-0 border-l border-solid border flex-col items-center p-6">
<img src={logo} className="w-1/2 m-4" />
<div className="flex flex-col items-start justify-start leading-normal">
<h1 className="text-red26 text-lg font-bold">ورود یا ثبت نام</h1>
<h1 className="text-red26 text-lg font-bold">سامانه ثبت نام مدارس موسسه علمی اندیشمند</h1>
<p className="text-gray-500 text-sm mt-2">
کاربر گرامی لطفا یکی از دو گزینه زیر را انتخاب نمایید.
<br />
در صورتی که عضو نیستید روی دکمه ثبت نام بزنید
</p>
<Link
to="/dashboard"
className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-6"
onClick={activeLogin}
>
ورود
</Link>
<Link
to="/dashboard"
className="Login-box-form-btn w-full h-12 rounded-lg border border-solid border-red52 text-red52 flex items-center justify-center mt-4"
onClick={activeLogin}
>
ثبت نام
</Link>
<div className="w-full flex flex-col items-center justify-center">
<p className="w-3/5 text-xs my-20 text-center text-red26">
3 years ago
ثبت نام شما در سامانه به منزله قبول
<Link to="" className="font-bold"> شرایط و قوانین استفاده </Link>
میباشد
</p>
<p className="text-gray-300 text-xs">1401 - 1400</p>
</div>
3 years ago
</div>
</div>
{/* Slider */}
3 years ago
<div className="bg-grayEC w-3/5 rounded-tl-xl rounded-bl-xl flex flex-col items-center justify-center" >
<div className="slideshow" style={{direction: 'ltr'}}>
<div
className="slideshowSlider"
style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
>
{slideContents.map((item, index) => (
<div
className="slide"
key={`sildeNo${index}`}
>
<div className="w-full flex flex-col justify-center items-center">
<img src={item.image} style={{height: '500px'}}/>
<h1 className="w-4/5 text-xl my-2 text-red26 font-bold">{item.title}</h1>
<p className=" px-12 text-right text-sm whitespace-normal">{item.description}</p>
</div>
</div>
))}
</div>
3 years ago
<div className="slideshowDots">
{slideContents.map((_, idx) => (
<div
key={idx}
className={`slideshowDot${index === idx ? " active" : ""}`}
onClick={() => {
setIndex(idx);
}}
></div>
))}
</div>
</div>
</div>
</div>
3 years ago
</div>
3 years ago
);
};
export default LoginSignUp;