Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsiveness

Browse Source
This commit is contained in:
Laux Dev
2026-03-13 14:38:46 +08:00
parent 4478a74ece
commit f44258d134
28 changed files with 617 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
frontend/src/app/projects/page.jsx
View File

@@ -8,8 +8,11 @@ import SuccessToast from "../components/toast/success/successToast";
import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./project-card/Card";
const ProjectsPage = () => {
const router = useRouter();
const isMobile = useIsMobile();
const sampleData = [
{
name: "DOKS One Cooperative Bank Backend Develop",
@@ -177,67 +180,81 @@ const ProjectsPage = () => {
topbarTitle="Project"
requiredButtons={["title", "add", "search"]}
/>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>CPU Used/Limit</th>
<th>Memory Used/Limit</th>
<th>Storage Used/Limit</th>
<th>Date Created</th>
<th></th>
</tr>
</thead>
<tbody>
{sampleData.map((project, index) => {
return (
<tr
key={index}
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td>
<td style={{ textAlign: "center" }}>{project.version}</td>
<td>
<span className={styles.used}>{project.cpuUsed}</span> /{" "}
<span className={styles.limit}>{project.cpuLimit}</span>
</td>
<td>
<span className={styles.used}>
{project.memoryUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.memoryLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.storageUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.storageLimit}
</span>
</td>
<td>{project.dateCreated}</td>
<td>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
</div>
) : (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th>Name</th>
<th>Version</th>
<th>CPU Used/Limit</th>
<th>Memory Used/Limit</th>
<th>Storage Used/Limit</th>
<th>Date Created</th>
<th></th>
</tr>
</thead>
<tbody>
{sampleData.map((project, index) => {
return (
<tr
key={index}
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td>
<td style={{ textAlign: "center" }}>
{project.version}
</td>
<td>
<span className={styles.used}>{project.cpuUsed}</span>{" "}
/{" "}
<span className={styles.limit}>
{project.cpuLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.memoryUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.memoryLimit}
</span>
</td>
<td>
<span className={styles.used}>
{project.storageUsed}
</span>{" "}
/{" "}
<span className={styles.limit}>
{project.storageLimit}
</span>
</td>
<td>{project.dateCreated}</td>
<td>
<div className={styles.actions}>
<div>
<ActionButton icon={<ViewIcon />} />
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>