84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import {
|
||
Box,
|
||
Card,
|
||
CardContent,
|
||
Typography,
|
||
Button,
|
||
Stack,
|
||
} from "@mui/material";
|
||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||
import FileDownloadIcon from "@mui/icons-material/FileDownload";
|
||
|
||
const DataCategories = () => {
|
||
// لیست کارتها (میتوانید این را از دیتابیس بگیرید)
|
||
const categories = [
|
||
{ id: 1, title: "آماركلي" },
|
||
{ id: 2, title: "تیکتهای در انتظار" },
|
||
{ id: 3, title: "تيكت هاي بحراني" },
|
||
{ id: 4, title: "گزارشهای ماهانه" },
|
||
{ id: 5, title: "گزارشهای ماهانه" },
|
||
{ id: 6, title: "گزارشهای ماهانه" },
|
||
{ id: 7, title: "گزارشهای ماهانه" },
|
||
{ id: 8, title: "گزارشهای ماهانه" },
|
||
{ id: 9, title: "گزارشهای ماهانه" },
|
||
{ id: 10, title: "گزارشهای ماهانه" },
|
||
{ id: 11, title: "گزارشهای ماهانه" },
|
||
{ id: 12, title: "گزارشهای ماهانه" },
|
||
{ id: 13, title: "گزارشهای ماهانه" },
|
||
];
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: "grid",
|
||
// ریسپانسیو بودن: در موبایل ۱ ستون، در تبلت ۲، در دسکتاپ ۴ ستون
|
||
gridTemplateColumns: {
|
||
xs: "1fr",
|
||
sm: "1fr 1fr",
|
||
md: "repeat(6, 1fr)",
|
||
},
|
||
gap: 3,
|
||
}}
|
||
>
|
||
{categories.map((item) => (
|
||
<Card
|
||
key={item.id}
|
||
sx={{
|
||
aspectRatio: "1/1", // مربع کردن کارت
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
transition: "0.3s",
|
||
"&:hover": { boxShadow: 6, transform: "translateY(-5px)" },
|
||
}}
|
||
>
|
||
<CardContent>
|
||
<Typography variant="h6" align="center" gutterBottom>
|
||
{item.title}
|
||
</Typography>
|
||
</CardContent>
|
||
|
||
<Stack spacing={1} sx={{ p: 2 }}>
|
||
{/* <Button
|
||
variant="contained"
|
||
startIcon={<VisibilityIcon />}
|
||
fullWidth
|
||
>
|
||
مشاهده
|
||
</Button> */}
|
||
<Button
|
||
variant="outlined"
|
||
startIcon={<FileDownloadIcon />}
|
||
fullWidth
|
||
>
|
||
اکسل
|
||
</Button>
|
||
</Stack>
|
||
</Card>
|
||
))}
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default DataCategories;
|