styles: design update
This commit is contained in:
parent
26d5647209
commit
f3eda25d02
@ -15,7 +15,7 @@ const HomePage = async () => {
|
||||
sx={{ boxShadow: "none", borderRadius: "12px", marginBlockStart: 2 }}
|
||||
>
|
||||
<CardHeader
|
||||
title="Projects"
|
||||
title="Products"
|
||||
fontWeight={"bold"}
|
||||
sx={{ borderBlockEnd: "1px solid var(--primary_light)" }}
|
||||
/>
|
||||
|
||||
@ -31,6 +31,9 @@
|
||||
--input-border-default: #e0e3e7;
|
||||
--input-border-hover: #b2bac2;
|
||||
|
||||
--clr_table_border: #eeeeee;
|
||||
--clr_table_cell_border: #e0e0e0;
|
||||
|
||||
--dashboard-bg: #eef2f6; /* #EEF2F6 */
|
||||
|
||||
// ========== Font Family ==========
|
||||
|
||||
@ -73,7 +73,7 @@ const ReviewModal = ({
|
||||
<Stack
|
||||
spacing={2}
|
||||
direction={"column"}
|
||||
sx={{ maxHeight: "350px", overflow: "auto" }}
|
||||
sx={{ maxHeight: "370px", overflow: "auto" }}
|
||||
>
|
||||
{reviewModalData.map((review: ReviewModalData, index: number) => (
|
||||
<ReviewModalContent key={index} data={review} />
|
||||
|
||||
@ -1,15 +1,51 @@
|
||||
@use "@/theme/sass/helper" as *;
|
||||
.sort {
|
||||
@include displayFlex(row, center, flex-start);
|
||||
gap: rem(4);
|
||||
}
|
||||
.clamp_2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.responsive_table {
|
||||
width: 100%;
|
||||
max-height: rem(400);
|
||||
overflow: auto;
|
||||
border: 1px solid var(--clr_table_border);
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
text-align: start;
|
||||
padding-inline: rem(10);
|
||||
padding-block: rem(4);
|
||||
min-height: rem(40);
|
||||
height: rem(40);
|
||||
cursor: pointer;
|
||||
color: var(--primary_text_clr);
|
||||
font-weight: var(--fw_medium);
|
||||
min-width: rem(100);
|
||||
border-bottom: 1px solid var(--clr_table_cell_border);
|
||||
background: var(--bg_white);
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
&:first-child {
|
||||
min-width: max-content;
|
||||
}
|
||||
&:last-child {
|
||||
min-width: max-content;
|
||||
text-align: center;
|
||||
}
|
||||
&:nth-of-type(6),
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
min-width: rem(152);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -20,6 +56,15 @@
|
||||
padding-inline: rem(10);
|
||||
padding-block: rem(4);
|
||||
min-height: rem(40);
|
||||
border-bottom: 1px solid var(--clr_table_cell_border);
|
||||
border-right: 1px solid var(--clr_table_cell_border);
|
||||
&:last-child {
|
||||
text-align: center;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(odd) {
|
||||
background: var(--clr_gray_100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,10 +5,16 @@ import {
|
||||
getCoreRowModel,
|
||||
flexRender,
|
||||
} from "@tanstack/react-table";
|
||||
import global from "../../../src/theme/global/global.module.scss";
|
||||
import global from "/src/theme/global/global.module.scss";
|
||||
import styles from "./TanStackTable.module.scss";
|
||||
import { useEffect, useState } from "react";
|
||||
import ReviewModal from "../reviewModal/ReviewModal";
|
||||
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
|
||||
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
||||
import HeightIcon from "@mui/icons-material/Height";
|
||||
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
|
||||
import { IconButton, Tooltip } from "@mui/material";
|
||||
import { grey } from "@mui/material/colors";
|
||||
|
||||
const TanStackTable = ({ data }: any) => {
|
||||
const [tableData, setTableData] = useState([]);
|
||||
@ -34,8 +40,15 @@ const TanStackTable = ({ data }: any) => {
|
||||
const columns: any = [
|
||||
{
|
||||
header: (
|
||||
<div onClick={() => handleSort("id")}>
|
||||
ID {sortOrder === "asc" ? "↑" : sortOrder === "desc" ? "↓" : ""}
|
||||
<div className={styles.sort} onClick={() => handleSort("id")}>
|
||||
ID{" "}
|
||||
{sortOrder === "asc" ? (
|
||||
<ArrowDropUpIcon sx={{ color: grey[300] }} />
|
||||
) : sortOrder === "desc" ? (
|
||||
<ArrowDropDownIcon sx={{ color: grey[300] }} />
|
||||
) : (
|
||||
<HeightIcon sx={{ color: grey[300] }} />
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
accessorKey: "id",
|
||||
@ -47,6 +60,13 @@ const TanStackTable = ({ data }: any) => {
|
||||
{
|
||||
header: "Description",
|
||||
accessorKey: "description",
|
||||
cell: ({ row }: any) => (
|
||||
<>
|
||||
<Tooltip title={row.original.description}>
|
||||
<p className={styles.clamp_2}>{row.original.description}</p>
|
||||
</Tooltip>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Category",
|
||||
@ -82,9 +102,14 @@ const TanStackTable = ({ data }: any) => {
|
||||
cell: ({ row }: any) => (
|
||||
<>
|
||||
{/* {row.original.reviews.length} Reviews */}
|
||||
<button onClick={() => handleButtonClick(row.original)}>
|
||||
View Reviews ({row.original.reviews.length})
|
||||
</button>
|
||||
<IconButton
|
||||
aria-label="log out"
|
||||
size="medium"
|
||||
color="primary"
|
||||
onClick={() => handleButtonClick(row.original)}
|
||||
>
|
||||
<RemoveRedEyeIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
||||
@ -26,7 +26,7 @@ const TitleHeader = () => {
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" color="text.primary" fontWeight={"bold"}>
|
||||
Projects
|
||||
Products
|
||||
</Typography>
|
||||
<Breadcrumbs aria-label="breadcrumb">
|
||||
<Link
|
||||
@ -51,7 +51,7 @@ const TitleHeader = () => {
|
||||
color="inherit"
|
||||
href="/material-ui/getting-started/installation/"
|
||||
>
|
||||
Project Table
|
||||
Product Table
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
</CardContent>
|
||||
|
||||
@ -103,7 +103,7 @@ export default function DashboardWrapper(props: Props) {
|
||||
</Toolbar>
|
||||
{/* <Divider /> */}
|
||||
<CssList sx={{ padding: "0", paddingInline: "18px" }}>
|
||||
{["Project Table"].map((text, index) => (
|
||||
{["Product Table"].map((text, index) => (
|
||||
<ListItem
|
||||
key={text}
|
||||
disablePadding
|
||||
@ -151,9 +151,7 @@ export default function DashboardWrapper(props: Props) {
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div">
|
||||
Responsive drawer
|
||||
</Typography>
|
||||
<Typography variant="h6" noWrap component="div"></Typography>
|
||||
</Box>
|
||||
<Box display={"flex"} alignItems={"center"} gap={1}>
|
||||
<Box
|
||||
@ -236,7 +234,7 @@ export default function DashboardWrapper(props: Props) {
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
p: 3,
|
||||
width: { md: `calc(100% - ${drawerWidth}px)` },
|
||||
width: { xs: "100%", md: `calc(100% - ${drawerWidth}px)` },
|
||||
}}
|
||||
>
|
||||
<Toolbar />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user