keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-07-07 21:04:11 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polished code. Reorganized text styling into separate sizes and colors. Also polished svg icons

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-05 23:48:49 +08:00
parent c9b18608a1
commit 01c7c288c4
33 changed files with 478 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/Components/ProductsPage/BlobView/BlobView.tsx Normal file
View file

@ -0,0 +1,36 @@
import * as React from "react";
import styles from "../../../styles";
import { ProductList } from "../../../Interfaces/Interfaces";
import ProductIcon from "../../Icons/ProductIcon/ProductIcon";
export default function BlobView({ Products }: ProductList) {
return (
<div>
{Products.map((row) => (
<div
key={row.id}
style={{
display: "flex",
flexDirection: "column",
borderRadius: 16,
backgroundColor: "#1d3b33",
margin: 32,
lineHeight: 0,
padding: 16,
}}
>
<div style={styles.content_row}>
<ProductIcon size={4} color="white" />{" "}
<p style={{ ...styles.text_white, ...styles.text_L }}>{row.name}</p>
</div>
<p style={{ ...styles.text_white, ...styles.text_M }}>ID: {row.id}</p>
<p style={{ ...styles.text_white, ...styles.text_S }}>
Last Modified: {row.last_modified}
</p>
</div>
))}
</div>
);
}

56
src/Components/ProductsPage/TableView/TableView.tsx Normal file
View file

@ -0,0 +1,56 @@
import * as React from "react";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import styles from "../../../styles";
import { ProductList } from "../../../Interfaces/Interfaces";
export default function TableView({ Products }: ProductList) {
return (
<TableContainer
style={{
backgroundColor: "#1d3b33",
borderRadius: 8,
}}
>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Product ID
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Product
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_M }}>
Last Modified
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Products.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.id}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.name}
</TableCell>
<TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.last_modified}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}