add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,33 +1,41 @@
|
||||
import CalendarAdD from "@/components/icons/CalendarAdD"
|
||||
import CardTickD from "@/components/icons/CardTickD"
|
||||
import CalendarAdD from "@/components/icons/CalendarAdD";
|
||||
import CardTickD from "@/components/icons/CardTickD";
|
||||
|
||||
function Cards({ user }) {
|
||||
return (
|
||||
<div className='flex md:hidden mt-[16px] mb-[24px] items-start justify-center gap-[16px]'>
|
||||
<div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[6px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#5559CE] rounded-full p-[7px]'>
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CardTickD />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.total_transactions} <span className='text-[11px]'>تومان</span></p>
|
||||
<p className='text-[#616161] text-nowrap text-[12px] font-normal'>مجموع تراکنش ها</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[12px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#FFC051] rounded-full p-[7px]'>
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.number_of_turns}</p>
|
||||
<p className='text-[#616161] text-nowrap text-[12px] font-normal'>تعداد نوبت های شما</p>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex md:hidden mt-[16px] mb-[24px] items-start justify-center gap-[16px]">
|
||||
<div className="py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[6px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#5559CE] rounded-full p-[7px]">
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CardTickD />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[14px] font-medium">
|
||||
{user.total_transactions} <span className="text-[11px]">تومان</span>
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[12px] font-normal">
|
||||
مجموع تراکنش ها
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[12px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#FFC051] rounded-full p-[7px]">
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[14px] font-medium">
|
||||
{user.number_of_turns}
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[12px] font-normal">
|
||||
تعداد نوبت های شما
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cards
|
||||
export default Cards;
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
import Image from "next/image"
|
||||
import Image from "next/image";
|
||||
|
||||
function Head({ user }) {
|
||||
return (
|
||||
<div
|
||||
className="w-full flex flex-row md:flex-col items-center justify-center md:justify-start gap-[12px] md:gap-[4px]"
|
||||
>
|
||||
<Image
|
||||
className="rounded-full border-[3px] border-solid border-[#F8F8FF] shadow-[0px_1px_25.6px_0px_rgba(85,_89,_205,_0.20)]"
|
||||
src={user.profile}
|
||||
alt="profile"
|
||||
height={73}
|
||||
width={73}
|
||||
/>
|
||||
<div className="flex flex-col items-start md:items-center justify-center gap-[8px] md:gap-[4px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full flex flex-row md:flex-col items-center justify-center md:justify-start gap-[12px] md:gap-[4px]">
|
||||
<Image
|
||||
className="rounded-full border-[3px] border-solid border-[#F8F8FF] shadow-[0px_1px_25.6px_0px_rgba(85,_89,_205,_0.20)]"
|
||||
src={user.profile}
|
||||
alt="profile"
|
||||
height={73}
|
||||
width={73}
|
||||
/>
|
||||
<div className="flex flex-col items-start md:items-center justify-center gap-[8px] md:gap-[4px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -9,72 +9,74 @@ import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
|
||||
import { useState } from "react";
|
||||
import ModalLogout from "./ModalLogout";
|
||||
|
||||
function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSide }) {
|
||||
function List({
|
||||
value,
|
||||
setValue,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
const listMenu = [
|
||||
{ name: "حساب کاربری", icon: <ProfileD active={value === 0} /> },
|
||||
{ name: "نوبت های من", icon: <CalndarD active={value === 1} /> },
|
||||
{ name: "تراکنش های من", icon: <CardD active={value === 2} /> },
|
||||
{ name: "نظرات من", icon: <MessageD active={value === 3} /> },
|
||||
{ name: "پیام ها", icon: <NotificationD active={value === 4} /> },
|
||||
{ name: "خروج", icon: <LogoutD active={value === 5} /> },
|
||||
];
|
||||
|
||||
const listMenu = [
|
||||
{ name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
|
||||
{ name: 'نوبت های من', icon: <CalndarD active={value === 1} /> },
|
||||
{ name: 'تراکنش های من', icon: <CardD active={value === 2} /> },
|
||||
{ name: 'نظرات من', icon: <MessageD active={value === 3} /> },
|
||||
{ name: 'پیام ها', icon: <NotificationD active={value === 4} /> },
|
||||
{ name: 'خروج', icon: <LogoutD active={value === 5} /> },
|
||||
];
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<ul className="flex flex-col items-start justify-start w-full">
|
||||
<ModalLogout
|
||||
open={open}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
{listMenu.map((item, idx) => (
|
||||
<li
|
||||
className="w-full"
|
||||
key={idx}
|
||||
>
|
||||
<Button
|
||||
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
return (
|
||||
<ul className="flex flex-col items-start justify-start w-full">
|
||||
<ModalLogout open={open} handleClose={handleClose} />
|
||||
{listMenu.map((item, idx) => (
|
||||
<li className="w-full" key={idx}>
|
||||
<Button
|
||||
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
transition-all duration-300 before:transition-all before:duration-300
|
||||
!relative before:!absolute before:!right-0 !flex !justify-between !items-center
|
||||
before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
|
||||
${value === idx ?
|
||||
'before:md:!bg-[#5559CE]' :
|
||||
'before:!bg-transparent'
|
||||
${
|
||||
value === idx
|
||||
? "before:md:!bg-[#5559CE]"
|
||||
: "before:!bg-transparent"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIsOpenSide(false);
|
||||
!isTurnsDetails && setIsTurnsDetails(false);
|
||||
if (idx === 5)
|
||||
handleOpen()
|
||||
else
|
||||
setValue(idx);
|
||||
}}
|
||||
>
|
||||
<div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
|
||||
<div className="w-[24px] h-[24px]">
|
||||
{item.icon}
|
||||
</div>
|
||||
<p
|
||||
className={`
|
||||
onClick={() => {
|
||||
setIsOpenSide(false);
|
||||
!isTurnsDetails && setIsTurnsDetails(false);
|
||||
if (idx === 5) handleOpen();
|
||||
else setValue(idx);
|
||||
}}
|
||||
>
|
||||
<div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
|
||||
<div className="w-[24px] h-[24px]">{item.icon}</div>
|
||||
<p
|
||||
className={`
|
||||
text-[16px] transition-all duration-500
|
||||
${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
|
||||
${
|
||||
value === idx
|
||||
? "text-[#5559CE] font-bold"
|
||||
: "text-[#7E7E7E] font-normal"
|
||||
}
|
||||
`}
|
||||
>{item.name}</p>
|
||||
</div>
|
||||
<div className="flex md:hidden">
|
||||
<ArrowLeftSideBar active={value === idx} />
|
||||
</div>
|
||||
</Button>
|
||||
{listMenu.length > idx + 1 && (
|
||||
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
>
|
||||
{item.name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex md:hidden">
|
||||
<ArrowLeftSideBar active={value === idx} />
|
||||
</div>
|
||||
</Button>
|
||||
{listMenu.length > idx + 1 && (
|
||||
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,48 +1,45 @@
|
||||
import { styleDefault } from '@/mui';
|
||||
import { Box, Button, Modal } from '@mui/material';
|
||||
import CloseModalD from '@/components/icons/CloseModalD';
|
||||
import { styleDefault } from "@/mui";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
|
||||
function ModalLogout({ open, handleClose }) {
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>خروج</p>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
className='!p-1'
|
||||
variant='text'
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا مطمئن هستید که میخواهید از حساب کاربری خود خارج شوید؟</p>
|
||||
<div className='flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
|
||||
>
|
||||
خروج
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
return (
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
خروج
|
||||
</p>
|
||||
<Button onClick={handleClose} className="!p-1" variant="text">
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
|
||||
آیا مطمئن هستید که میخواهید از حساب کاربری خود خارج شوید؟
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
|
||||
>
|
||||
خروج
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalLogout
|
||||
export default ModalLogout;
|
||||
|
||||
@@ -2,41 +2,50 @@ import Cards from "./Cards";
|
||||
import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Sidebar({ user, value, isTurnsDetails, setIsTurnsDetails, setValue, isOpenSide, setIsOpenSide }) {
|
||||
|
||||
return (
|
||||
// ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
|
||||
<div className={`
|
||||
function Sidebar({
|
||||
user,
|
||||
value,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
return (
|
||||
// ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
|
||||
<div
|
||||
className={`
|
||||
md:block absolute md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%]
|
||||
bg-[#FAFAFA] padding-responsive transition-all duration-700
|
||||
h-screen md:h-auto pt-[24px] md:pt-0
|
||||
z-5 top-[60px] sm:top-[77px] md:top-0 md:px-0
|
||||
${isOpenSide ?
|
||||
'right-0' :
|
||||
'md:flex -right-full md:right-0'}
|
||||
`}>
|
||||
<aside
|
||||
className="relative md:sticky top-0 h-fit
|
||||
${isOpenSide ? "right-0" : "md:flex -right-full md:right-0"}
|
||||
`}
|
||||
>
|
||||
<aside
|
||||
className="relative md:sticky top-0 h-fit
|
||||
md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
|
||||
>
|
||||
<div className="
|
||||
>
|
||||
<div
|
||||
className="
|
||||
pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none
|
||||
md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
|
||||
">
|
||||
<Head user={user} />
|
||||
<Cards user={user} />
|
||||
<List
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
"
|
||||
>
|
||||
<Head user={user} />
|
||||
<Cards user={user} />
|
||||
<List
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
export default Sidebar;
|
||||
|
||||
Reference in New Issue
Block a user