51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import {
|
|
CardContent,
|
|
Typography,
|
|
Divider,
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
Paper,
|
|
Box,
|
|
IconButton,
|
|
} from "@mui/material";
|
|
|
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
|
import { ISectionCardProps } from "./types";
|
|
|
|
export const SectionCard = ({ title, icon, items }: ISectionCardProps) => (
|
|
<Paper
|
|
elevation={3}
|
|
sx={{ padding: 2, margin: 2, display: "flex", flexDirection: "column" }}
|
|
>
|
|
<CardContent>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 2 }}>
|
|
<Box sx={{ display: "flex", gap: 1 }}>
|
|
{icon}
|
|
<Typography variant="h6" fontWeight="bold">
|
|
{title}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
|
<IconButton size="small">
|
|
<MoreVertIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
<Divider />
|
|
<List dense disablePadding>
|
|
{items.map((item, index) => (
|
|
<ListItem key={index} disableGutters>
|
|
<ListItemText
|
|
primary={item.title}
|
|
secondary={item.date}
|
|
primaryTypographyProps={{ fontSize: 14 }}
|
|
secondaryTypographyProps={{ fontSize: 12 }}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</CardContent>
|
|
</Paper>
|
|
);
|