113 lines
2.9 KiB
TypeScript
113 lines
2.9 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
List,
|
|
ListItem,
|
|
ListItemAvatar,
|
|
ListItemText,
|
|
Avatar,
|
|
Typography,
|
|
Box,
|
|
Button,
|
|
} from "@mui/material";
|
|
|
|
export interface LatestItem {
|
|
id: string | number;
|
|
icon: React.ReactNode;
|
|
iconBgColor?: string;
|
|
title: string;
|
|
subtitle: string;
|
|
amount: string;
|
|
timeAgo: string;
|
|
}
|
|
|
|
export interface LatestItemsListProps {
|
|
title?: string;
|
|
items: LatestItem[];
|
|
onViewAll?: () => void;
|
|
accentColor: any;
|
|
}
|
|
|
|
export default function LatestItems({
|
|
title = "Recent Transactions",
|
|
items,
|
|
onViewAll,
|
|
accentColor,
|
|
}: LatestItemsListProps) {
|
|
return (
|
|
<Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
|
|
{/* Header */}
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, px: 2 }}>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
{title}
|
|
</Typography>
|
|
{onViewAll && (
|
|
<Button
|
|
variant="text"
|
|
color="inherit"
|
|
size="small"
|
|
sx={{ textTransform: "none", color: "text.secondary", fontWeight: "medium" }}
|
|
onClick={onViewAll}
|
|
>
|
|
view all
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
|
|
{/* List */}
|
|
<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" },
|
|
transition: "background-color 0.2s ease",
|
|
}}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar
|
|
variant="rounded"
|
|
sx={{
|
|
bgcolor: `${accentColor}22`,
|
|
color: "inherit",
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 3,
|
|
mr: 2,
|
|
}}
|
|
>
|
|
{item.icon}
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
|
|
<ListItemText
|
|
primary={
|
|
<Typography variant="subtitle1" fontWeight={600} color="text.primary">
|
|
{item.title}
|
|
</Typography>
|
|
}
|
|
secondary={
|
|
<Typography variant="body2" color="text.secondary">
|
|
{item.subtitle}
|
|
</Typography>
|
|
}
|
|
/>
|
|
|
|
<Box sx={{ textAlign: "right" }}>
|
|
<Typography variant="subtitle1" fontWeight={700} color="text.primary">
|
|
{item.amount}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
|
|
{item.timeAgo}
|
|
</Typography>
|
|
</Box>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Box>
|
|
);
|
|
}
|