design dashboard comments & messages & modals
This commit is contained in:
@@ -9,52 +9,59 @@ 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";
|
||||
|
||||
const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
|
||||
|
||||
function ContentTabs({ user }) {
|
||||
function ContentTabs({ user, value, setValue }) {
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const components = [
|
||||
<DetailUser user={user} />,
|
||||
<Turns user={user} />,
|
||||
<Turns user={user} setIsTurnsDetails={setIsTurnsDetails} />,
|
||||
<Transactions user={user} />,
|
||||
<Comments user={user} />,
|
||||
<Messages />
|
||||
]
|
||||
<Messages user={user} />
|
||||
];
|
||||
|
||||
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]">
|
||||
<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]">
|
||||
{components[value]}
|
||||
</div>
|
||||
{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]">
|
||||
{components[value]}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user