91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
List,
|
|
ListItem,
|
|
ListItemAvatar,
|
|
ListItemText,
|
|
Avatar,
|
|
Typography,
|
|
Box,
|
|
IconButton,
|
|
} from "@mui/material";
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import { LatestItemsViewProps } from "./LatestItems.models";
|
|
|
|
export default function LatestItemsView({
|
|
items,
|
|
header,
|
|
accentColor,
|
|
canExpand,
|
|
onExpand,
|
|
isFetching,
|
|
}: LatestItemsViewProps) {
|
|
return (
|
|
<Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
|
|
<Box sx={{ mb: 2, px: 2 }}>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
{header}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<List disablePadding>
|
|
{items.map((item, index) => (
|
|
<ListItem
|
|
key={item.id}
|
|
sx={{
|
|
px: { xs: 1, sm: 2 },
|
|
py: 2,
|
|
mb: index !== items.length - 1 ? 1 : 0,
|
|
borderRadius: 3,
|
|
"&:hover": { bgcolor: "action.hover" },
|
|
}}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar
|
|
variant="rounded"
|
|
sx={{
|
|
bgcolor: `${accentColor}22`,
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 3,
|
|
mr: 2,
|
|
}}
|
|
/>
|
|
</ListItemAvatar>
|
|
|
|
<ListItemText
|
|
primary={
|
|
<Typography variant="subtitle1" fontWeight={600}>
|
|
{item.title}
|
|
</Typography>
|
|
}
|
|
secondary={
|
|
<Typography variant="body2" color="text.secondary">
|
|
{item.subtitle}
|
|
</Typography>
|
|
}
|
|
/>
|
|
|
|
<Box sx={{ textAlign: "right" }}>
|
|
<Typography variant="subtitle1" fontWeight={700}>
|
|
{item.amount}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{item.timeAgo}
|
|
</Typography>
|
|
</Box>
|
|
</ListItem>
|
|
))}
|
|
|
|
{canExpand && (
|
|
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
|
|
<IconButton size="small" onClick={onExpand}>
|
|
<ExpandMoreIcon />
|
|
</IconButton>
|
|
</Box>
|
|
)}
|
|
</List>
|
|
</Box>
|
|
);
|
|
}
|