Files
Frontend-Internal-Developer…/frontend/src/app/components/permissions/Permissions.jsx
2026-03-03 20:42:12 +08:00

74 lines
2.3 KiB
JavaScript

import ActionButton from "../actionButton/ActionButton";
import DeleteIcon from "../icons/delete";
import FileIcon from "../icons/file";
import editUserStyle from "./styles.module.css";
import React from "react";
const Permissions = ({ sampleData = [] }) => {
return (
<>
{/* Permissions */}
<div className={editUserStyle.userPermissions}>
{/* Add permissions */}
<div className={editUserStyle.imanginaryDiv}></div>
<div className={editUserStyle.permissionsContainer}>
{/* Header */}
<div className={editUserStyle.permissionsHeader}>
<p>Permissions</p>
<div className={editUserStyle.svgContainer}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 5.29199V18.7087"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.29102 12H18.7077"
stroke="#333649"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
{sampleData.length === 0 ? (
// Default Message
<div className={editUserStyle.permissionDefaultState}>
<p>No permission added yet</p>
</div>
) : (
// Sampple Data(static)
sampleData.map((perm, index) => {
return (
<div className={editUserStyle.permissions} key={index}>
<div className={editUserStyle.permissionsItem}>
<FileIcon />
<p>{perm.permission}</p>
</div>
<div className={editUserStyle.deleteBtn}>
<ActionButton icon={<DeleteIcon />} />
</div>
</div>
);
})
)}
</div>
</div>
</>
);
};
export default Permissions;