39 lines
817 B
TypeScript
39 lines
817 B
TypeScript
import type { ReactElement, ReactNode } from "react";
|
|
import { Box, Card, CardContent, Tabs } from "@mui/material";
|
|
|
|
interface TabbedCardProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
tabs: ReactElement[];
|
|
children: ReactNode;
|
|
contentSx?: object;
|
|
tabsSx?: object;
|
|
}
|
|
|
|
export function TabbedCard({
|
|
value,
|
|
onChange,
|
|
tabs,
|
|
children,
|
|
contentSx,
|
|
tabsSx,
|
|
}: TabbedCardProps) {
|
|
return (
|
|
<Card variant="outlined">
|
|
<CardContent sx={{ p: 0 }}>
|
|
<Tabs
|
|
value={value}
|
|
onChange={(_, next) => onChange(String(next))}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
allowScrollButtonsMobile
|
|
sx={{ px: 1, borderBottom: 1, borderColor: "divider", ...tabsSx }}
|
|
>
|
|
{tabs}
|
|
</Tabs>
|
|
<Box sx={{ p: 1.5, ...contentSx }}>{children}</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|