106 lines
4.5 KiB
JavaScript
106 lines
4.5 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
// Tabs
|
|
import Turns from "./tabs/turns";
|
|
import DetailUser from "./tabs/detailUser";
|
|
import Comments from "./tabs/comments";
|
|
import Messages from "./tabs/messages";
|
|
import Tabs from "@/app/component/Tabs";
|
|
import Transactions from "./tabs/transactions";
|
|
import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
|
|
import ArrowRightD from "@/components/icons/ArrowRightD";
|
|
import { Button } from "@mui/material";
|
|
import NotfoundDashboard from "./NotfoundDashboard";
|
|
import DownloadD from "@/components/icons/DownloadD";
|
|
|
|
const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
|
|
|
|
function ContentTabs({ user, value, isTurnsDetails, setIsTurnsDetails, setValue, isOpenSide, setIsOpenSide }) {
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const handleChange = (event, newValue) => setValue(newValue);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 2000);
|
|
}, []);
|
|
|
|
|
|
const components = [
|
|
<DetailUser user={user} />,
|
|
<Turns user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />,
|
|
<Transactions user={user} loading={loading} />,
|
|
<Comments user={user} loading={loading} />,
|
|
<Messages user={user} loading={loading} />,
|
|
<NotfoundDashboard />
|
|
];
|
|
|
|
return (
|
|
<div
|
|
className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px]
|
|
shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
|
bg-transparent md:bg-[#FFF]"
|
|
>
|
|
<div className="w-full flex items-center justify-between">
|
|
<Button
|
|
className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
|
|
onClick={() => isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)}
|
|
variant="text"
|
|
>
|
|
<ArrowRightD />
|
|
<p className="text-[#525252] text-[14px] font-bold">{isTurnsDetails ? 'جزئیات نوبت ' : listTab[value]}</p>
|
|
</Button>
|
|
{value === 1 && isTurnsDetails ? (
|
|
<Button
|
|
className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
|
|
variant="text"
|
|
>
|
|
<DownloadD />
|
|
دانلود اطلاعات نوبت
|
|
</Button>
|
|
) : undefined}
|
|
</div>
|
|
{isTurnsDetails ?
|
|
<IsTurnsDetails loading={loading} user={user} setIsTurnsDetails={setIsTurnsDetails} /> : (
|
|
<>
|
|
<div className='!hidden md:!flex !w-full'>
|
|
<Tabs
|
|
style={{
|
|
'.MuiTabs-indicator': {
|
|
height: '2px',
|
|
borderRadius: '16px',
|
|
background: '#5559CE',
|
|
},
|
|
'& .MuiTabs-scroller': {
|
|
borderBottom: '1px solid #EFEFEF',
|
|
},
|
|
'& .MuiTabs-flexContainer': {
|
|
paddingRight: '15px',
|
|
paddingLeft: '15px',
|
|
},
|
|
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
|
|
color: '#5559CE !important'
|
|
},
|
|
'& .MuiButtonBase-root.Mui-selected': {
|
|
color: '#5559CE !important'
|
|
}
|
|
}}
|
|
value={value}
|
|
color='#5559CE'
|
|
listTab={listTab}
|
|
handleChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
|
|
{components[value]}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ContentTabs |