all tabs page dashboard and responsive
This commit is contained in:
Ehsan
@@ -0,0 +1,33 @@
|
||||
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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cards
|
||||
@@ -3,16 +3,19 @@ import Image from "next/image"
|
||||
function Head({ user }) {
|
||||
return (
|
||||
<div
|
||||
className="w-full flex flex-col items-center justify-start gap-[4px]"
|
||||
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}
|
||||
/>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,8 +5,9 @@ import MessageD from "@/components/icons/MessageD";
|
||||
import ProfileD from "@/components/icons/ProfileD";
|
||||
import NotificationD from "@/components/icons/NotificationD";
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
|
||||
|
||||
function List({ value, setValue }) {
|
||||
function List({ value, setValue, setIsOpenSide }) {
|
||||
|
||||
const listMenu = [
|
||||
{ name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
|
||||
@@ -25,25 +26,35 @@ function List({ value, setValue }) {
|
||||
key={idx}
|
||||
>
|
||||
<Button
|
||||
className={`!flex !py-[24px] hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
!items-center !justify-start !gap-[8px] !relative before:!absolute before:!right-0
|
||||
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
!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:!bg-[#5559CE]' :
|
||||
'before:md:!bg-[#5559CE]' :
|
||||
'before:!bg-transparent'
|
||||
}`}
|
||||
onClick={() => setValue(idx)}
|
||||
onClick={() => {
|
||||
setValue(idx);
|
||||
setIsOpenSide(false);
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
<p
|
||||
className={`
|
||||
text-[16px]
|
||||
<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'}
|
||||
`}
|
||||
>{item.name}</p>
|
||||
>{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 w-full"></span>
|
||||
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
import { useState } from "react"
|
||||
import Head from "./Head"
|
||||
import List from "./List"
|
||||
import Cards from "./Cards";
|
||||
import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Sidebar({ user, value, setValue }) {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
function Sidebar({ user, value, setValue, isOpenSide, setIsOpenSide }) {
|
||||
|
||||
return (
|
||||
// ${open ? 'lg:w-[39%]' : 'min-w-[80px]'}
|
||||
<div className="flex-1 w-[28%]">
|
||||
|
||||
// ${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={`
|
||||
// flex-1 overflow-hidden lg:w-[39%] w-full
|
||||
// `}
|
||||
className="
|
||||
sticky top-[calc(12px_+_58px_+_32px)] sm:top-[calc(21px_+_58px_+_45px)] md:top-[calc(30px_+_58px_+_58px)] lg:top-[calc(40px_+_58px_+_78px)]"
|
||||
className="relative md:sticky top-0 h-fit
|
||||
md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
|
||||
>
|
||||
<div className="
|
||||
|
||||
pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
|
||||
|
||||
">
|
||||
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}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Reference in New Issue
Block a user