77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
Box,
|
|
Button,
|
|
} from "@mui/material";
|
|
|
|
import "./TransactionsOverViewTable.scss";
|
|
|
|
interface ITableData {
|
|
state: string;
|
|
count: number;
|
|
percentage: string;
|
|
color?: string;
|
|
}
|
|
|
|
interface ITransactionsOverViewTableProps {
|
|
data?: ITableData[];
|
|
}
|
|
|
|
const defaultData: ITableData[] = [
|
|
{ state: "Success", count: 120, percentage: "60%", color: "green" },
|
|
{ state: "Pending", count: 50, percentage: "25%", color: "orange" },
|
|
{ state: "Failed", count: 20, percentage: "10%", color: "red" },
|
|
{ state: "Other", count: 10, percentage: "5%", color: "gray" },
|
|
];
|
|
|
|
export const TransactionsOverViewTable = ({
|
|
data = defaultData,
|
|
}: ITransactionsOverViewTableProps) => {
|
|
console.log("data", data);
|
|
|
|
return (
|
|
<TableContainer className="transactions-overview-table" component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell align="center">State</TableCell>
|
|
<TableCell align="center">Count</TableCell>
|
|
<TableCell align="center">Percentage</TableCell>
|
|
<TableCell align="center">Action</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{data.map((row, i) => (
|
|
<TableRow key={`${row.state}-${i}`}>
|
|
<TableCell align="center">
|
|
<Box className="transactions-overview-table__state-wrapper">
|
|
<Box
|
|
className="transactions-overview-table__state"
|
|
sx={{
|
|
bgcolor: row.color,
|
|
}}
|
|
/>
|
|
{row.state}
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell align="center">{row.count}</TableCell>
|
|
<TableCell align="center">{row.percentage}</TableCell>
|
|
<TableCell align="center">
|
|
<Button variant="outlined" size="small">
|
|
View
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
};
|