41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
import { useCall } from "@/lib/contexts/call";
|
|
import { Box, Tab, Tabs } from "@mui/material";
|
|
import CallTabLabel from "./CallTabLabel";
|
|
|
|
const CallTabsList = () => {
|
|
const { calls, changeActiveTabCall, activeCall } = useCall();
|
|
const handleChange = (event, newValue) => {
|
|
changeActiveTabCall(newValue);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
|
<Tabs
|
|
value={activeCall}
|
|
onChange={handleChange}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
sx={{ background: "#e0e0e0" }}
|
|
>
|
|
{calls.map((call, index) => (
|
|
<Tab
|
|
component={"div"}
|
|
sx={{
|
|
width: 350,
|
|
p: 0,
|
|
py: 0.5,
|
|
background: call.active ? "#fff" : null,
|
|
borderTopRightRadius: call.active ? "16px" : 0,
|
|
borderTopLeftRadius: call.active ? "16px" : 0,
|
|
}}
|
|
label={<CallTabLabel index={index} tab={call} />}
|
|
key={call.id}
|
|
/>
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CallTabsList;
|