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

66
frontend/src/app/credentials/page.jsx
View File

@@ -1,3 +1,4 @@
"use client";
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
@@ -5,7 +6,10 @@ import styles from "./styles.module.css";
import DeleteIcon from "../components/icons/delete";
import SuccessToast from "../components/toast/success/successToast";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./card/Card";
const CredentialsPage = () => {
const isMobile = useIsMobile();
const sampleData = [
{
name: "mongo tls ca crt",
@@ -66,33 +70,43 @@ const CredentialsPage = () => {
topbarTitle="Credentials"
requiredButtons={["title", "add", "search", "env"]}
/>
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th width="45%">Name</th>
<th width="45%">Organization ID</th>
<th width="10%"></th>
</tr>
</thead>
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
<Card />
</div>
) : (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
<tr>
<th width="45%">Name</th>
<th width="45%">Organization ID</th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
{sampleData.map((org, index) => {
return (
<tr key={index}>
<td>{org.name}</td>
<td>{org.organizationID}</td>
<td className={styles.actions}>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
<tbody>
{sampleData.map((org, index) => {
return (
<tr key={index}>
<td>{org.name}</td>
<td>{org.organizationID}</td>
<td className={styles.actions}>
<div>
<ActionButton icon={<DeleteIcon />} />
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
</div>
</div>