103 lines
2.9 KiB
JavaScript
103 lines
2.9 KiB
JavaScript
import React from "react";
|
|
import TopHeader from "../components/topHeader/TopHeader";
|
|
import globalStyle from "../globalStyle.module.css";
|
|
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";
|
|
const CredentialsPage = () => {
|
|
const sampleData = [
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
{
|
|
name: "mongo tls ca crt",
|
|
organizationID: "67160a5ae69144ff19aafb86",
|
|
},
|
|
];
|
|
return (
|
|
<div className={globalStyle.section}>
|
|
<SuccessToast message="New Credential added successfully!" />
|
|
<div className={globalStyle.mainContainer}>
|
|
<div className={globalStyle.container}>
|
|
<TopHeader
|
|
buttonText="Add Credentials"
|
|
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>
|
|
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default CredentialsPage;
|