Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 14x 14x 14x | import { alpha } from "@mui/material/styles";
import { Box, Card, CardContent, Typography } from "@mui/material";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
export default function QuickAction({ icon, label, desc, onClick, color }) {
return (
<Card
elevation={0}
sx={{
border: (t) => `1px solid ${t.palette.divider}`,
borderRadius: 3,
cursor: "pointer",
transition: "box-shadow 0.2s, transform 0.2s",
"&:hover": { boxShadow: "0 4px 16px rgba(0,0,0,0.08)", transform: "translateY(-1px)" },
}}
onClick={onClick}
>
<CardContent sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Box
sx={{
width: 44,
height: 44,
borderRadius: 2.5,
bgcolor: (t) => alpha(t.palette[color].main, 0.1),
display: "flex",
alignItems: "center",
justifyContent: "center",
color: `${color}.main`,
flexShrink: 0,
}}
>
{icon}
</Box>
<Box>
<Typography variant="subtitle2" fontWeight={700} color="text.primary" sx={{ fontSize: "0.875rem" }}>
{label}
</Typography>
<Typography variant="caption" color="text.secondary">
{desc}
</Typography>
</Box>
<ArrowForwardIcon sx={{ ml: "auto", color: "text.disabled", fontSize: 18 }} />
</CardContent>
</Card>
);
}
|