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

all tabs page dashboard and responsive

Browse Source
This commit is contained in:
Ehsan
2024-09-05 00:21:58 +03:30
parent 52a745fcb8
commit 087ed4a818
50 changed files with 860 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/userAccount/ContentTabs.js
+45 -29
View File
@@ -10,10 +10,12 @@ 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";
const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
function ContentTabs({ user, value, setValue }) {
function ContentTabs({ user, value, setValue, isOpenSide, setIsOpenSide }) {
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
const handleChange = (event, newValue) => setValue(newValue);
@@ -27,37 +29,51 @@ function ContentTabs({ user, value, setValue }) {
];
return (
<div className="mt-[24px] pt-[12px] pb-[24px] w-full bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] bg-[#FFF]">
<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]"
>
<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>
{isTurnsDetails ?
<IsTurnsDetails user={user} setIsTurnsDetails={setIsTurnsDetails} /> : (
<>
<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 className="mt-[36px] px-[24px]">
<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>
</>