hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix responsive all page & add modal doctor id & page dashboard aside

Browse Source
This commit is contained in:
Ehsan
2024-09-01 01:36:36 +03:30
parent b058066380
commit 680ef74034
64 changed files with 682 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/register/SetCodePage.js
+71 -7
View File
@@ -1,11 +1,34 @@
import { Button } from "@mui/material"
import ArrowRightS from "../icons/ArrowRightS"
import OTPForm from "./element/OTPForm"
import ArrowLeftOrangeS from "../icons/ArrowLeftOrangeS"
import Link from "next/link"
import { useRef, useState } from "react"
import Link from "next/link";
import { Button } from "@mui/material";
import OTPForm from "./element/OTPForm";
import EditLogin from "../icons/EditLogin";
import RetryLogin from "../icons/RetryLogin";
import ArrowRightS from "../icons/ArrowRightS";
const time_resend_code = 120;
function SetCodePage({ setIsSendMsg, link }) {
const retryIcon = useRef();
const [timer, setTimer] = useState(0);
const handleTimer = () => {
setTimer('loading');
setTimeout(() => {
setTimer(time_resend_code);
let timePresent = time_resend_code;
const timerInterval = setInterval(() => {
timePresent--;
setTimer(timePresent);
!timePresent && clearInterval(timerInterval)
}, 1000);
}, 1000);
}
const handleOTP = (e) => {
e.target.nextElementSibling &&
e.target.nextElementSibling.focus()
@@ -32,10 +55,51 @@ function SetCodePage({ setIsSendMsg, link }) {
<OTPForm handleOTP={handleOTP} />
<OTPForm handleOTP={handleOTP} />
</div>
<Button className="flex items-center justify-start gap-1">
{/* <Button className="flex items-center justify-start gap-1">
<p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
<ArrowLeftOrangeS />
</Button>
</Button> */}
<div className='flex w-full items-center justify-between flex-wrap gap-y-5'>
<Button
className='flex !p-1 items-center justify-start gap-1 cursor-pointer'
onClick={() => setIsSendMsg(false)}
>
<EditLogin />
<p className='text-[#F17732] text-[14px] font-normal select-none'>ویرایش شماره موبایل</p>
</Button>
<Button
className='flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer'
// sx={{ '&.MuiButton-root:hover': { bgcolor: 'transparent' } }}
disabled={typeof timer === 'number' && timer !== 0}
onClick={() => {
if (!timer && timer !== 'loading') {
handleTimer();
// Rotate Retry Icon
retryIcon.current.classList.add('retry-icon');
// Remove Style Rotate Icon
setTimeout(() => {
retryIcon.current &&
retryIcon.current.classList.remove('retry-icon');
}, 1000);
}
}}
>
{timer && (timer !== 'loading') ? (
<p className='text-[#F17732] text-[14px] font-normal select-none'>{timer} ثانیه</p>
) : (
<>
<div ref={retryIcon}>
<RetryLogin />
</div>
<p className='text-[#F17732] text-[14px] font-normal select-none'>دریافت مجدد کد</p>
</>
)}
</Button>
</div>
</div>
<Link href={link}>
<Button
components/register/SignInPage.js
+5 -3
View File
@@ -1,7 +1,6 @@
import Field from '@/app/component/element/Field'
import { Button } from '@mui/material'
import Link from 'next/link'
import React from 'react'
function SignInPage({ setIsSendMsg }) {
return (
@@ -19,10 +18,13 @@ function SignInPage({ setIsSendMsg }) {
fullWidth
variant='contained'
onClick={() => setIsSendMsg(true)}
className='!rounded-[8px] !bg-[#5559CE]'
className='!rounded-[8px] !bg-[#5559CE] !py-[7.5px] md:!py-[8.5px] lg:!py-[10px]'
>ورود</Button>
<p className='text-[#525252] text-[14px] font-normal text-center mt-[49px] sm:mt-[58px] md:mt-[67px] lg:mt-[76px]'>
<span className='text-[#F17732] underline'>قوانین استفاده</span> از نوبت 724 را می پذیرم.
<Link href='/'>
<span className='text-[#F17732] underline'>قوانین استفاده</span>
</Link>{' '}
از نوبت 724 را می پذیرم.
</p>
</div>
)
components/register/index.js
+17 -12
View File
@@ -1,27 +1,32 @@
import Image from "next/image"
import Link from "next/link";
const about = ['سوالات متداول', 'تماس با ما', 'درباره ما'];
function RegisterPage({ children }) {
return (
<div
className="flex padding-responsive items-center justify-start sm:justify-center flex-col place-items-center h-screen w-full bg-banner-stroke !bg-bottom !bg-no-repeat !bg-cover"
className="flex padding-responsive items-center justify-start sm:justify-start mt-[32px] sm:mt-[48px] md:mt-[64px] lg:mt-[80px] flex-col h-[calc(100vh_-_80px)] w-full bg-banner-stroke !bg-bottom !bg-no-repeat !bg-cover"
>
<div className="flex items-center justify-center gap-[5px] mt-[32px] sm:mt-0">
<Image
src='/assets/images/logo.png'
width={40}
height={40}
alt="logo"
/>
<p className="text-[#5559CE] text-[20px] font-bold">نوبت ۷۲۴</p>
</div>
<Link href='/'>
<div className="flex items-center justify-center gap-[5px] sm:mt-0">
<Image
src='/assets/images/logo.png'
width={40}
height={40}
alt="logo"
/>
<p className="text-[#5559CE] text-[20px] font-bold">نوبت ۷۲۴</p>
</div>
</Link>
{children}
<div className="fixed sm:relative bottom-0 left-0 bg-[#FAFAFA] w-full mt-[127px] pb-[50px]">
<div className="fixed bottom-0 left-0 bg-[#FAFAFA] w-full mt-[127px] pb-[50px] px-[18px] sm:px-[67px] md:px[117px] lg:px-[166px]">
<div className="bg-border-t-gradient-sign h-px w-full"></div>
<div className="flex items-center justify-center gap-[32px] sm:gap-[40px] md:gap-[48px] lg:gap-[56px] mt-[36px]">
{about.map((item, idx) => (
<p className="text-[#494CB3] text-[14px] md:text-[16px] font-normal" key={idx}>{item}</p>
<Link href='/'>
<p className="text-[#494CB3] text-[14px] md:text-[16px] font-normal" key={idx}>{item}</p>
</Link>
))}
</div>
</div>