96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import * as React from 'react';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Button from '@mui/material/Button';
|
|
import Card from '@mui/material/Card';
|
|
import CardActions from '@mui/material/CardActions';
|
|
import CardHeader from '@mui/material/CardHeader';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import ListItemAvatar from '@mui/material/ListItemAvatar';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import Typography from '@mui/material/Typography';
|
|
import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
|
|
import { ArrowsDownUp as ArrowsDownUpIcon } from '@phosphor-icons/react/dist/ssr/ArrowsDownUp';
|
|
import { TrendDown as TrendDownIcon } from '@phosphor-icons/react/dist/ssr/TrendDown';
|
|
import { TrendUp as TrendUpIcon } from '@phosphor-icons/react/dist/ssr/TrendUp';
|
|
|
|
import { dayjs } from '@/lib/dayjs';
|
|
|
|
export type CurrencyCode = 'BTC' | 'ETH' | 'BNB';
|
|
|
|
export interface Transaction {
|
|
id: string;
|
|
type: 'add' | 'sub';
|
|
description: string;
|
|
balance: number;
|
|
currency: CurrencyCode;
|
|
amount: number;
|
|
createdAt: Date;
|
|
}
|
|
|
|
export interface TransactionsProps {
|
|
transactions: Transaction[];
|
|
}
|
|
|
|
export function Transactions({ transactions }: TransactionsProps): React.JSX.Element {
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
avatar={
|
|
<Avatar>
|
|
<ArrowsDownUpIcon fontSize="var(--Icon-fontSize)" />
|
|
</Avatar>
|
|
}
|
|
title="Transactions"
|
|
/>
|
|
<List disablePadding sx={{ '& .MuiListItem-root': { py: 2 } }}>
|
|
{transactions.map((transaction) => (
|
|
<ListItem divider key={transaction.id}>
|
|
<ListItemAvatar>
|
|
<Avatar
|
|
sx={{
|
|
bgcolor: transaction.type === 'add' ? 'var(--mui-palette-success-50)' : 'var(--mui-palette-error-50)',
|
|
color:
|
|
transaction.type === 'add' ? 'var(--mui-palette-success-main)' : 'var(--mui-palette-error-main)',
|
|
}}
|
|
>
|
|
{transaction.type === 'add' ? (
|
|
<TrendUpIcon fontSize="var(--Icon-fontSize)" />
|
|
) : (
|
|
<TrendDownIcon fontSize="var(--Icon-fontSize)" />
|
|
)}
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
disableTypography
|
|
primary={<Typography variant="subtitle2">{transaction.description}</Typography>}
|
|
secondary={
|
|
<Typography color="text.secondary" variant="body2">
|
|
{dayjs(transaction.createdAt).format('MM.DD.YYYY / hh:mm A')}
|
|
</Typography>
|
|
}
|
|
/>
|
|
<div>
|
|
<Typography
|
|
color={transaction.type === 'add' ? 'var(--mui-palette-success-main)' : 'var(--mui-palette-error-main)'}
|
|
sx={{ textAlign: 'right', whiteSpace: 'nowrap' }}
|
|
variant="subtitle2"
|
|
>
|
|
{transaction.type === 'add' ? '+' : '-'} {transaction.amount} {transaction.currency}
|
|
</Typography>
|
|
<Typography color="text.secondary" sx={{ textAlign: 'right' }} variant="body2">
|
|
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(transaction.balance)}
|
|
</Typography>
|
|
</div>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<CardActions>
|
|
<Button color="secondary" endIcon={<ArrowRightIcon />} size="small">
|
|
See all
|
|
</Button>
|
|
</CardActions>
|
|
</Card>
|
|
);
|
|
}
|