added components
This commit is contained in:
134
frontend/src/app/components/permissions/Permissions.jsx
Normal file
134
frontend/src/app/components/permissions/Permissions.jsx
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
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}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
|
||||||
|
stroke="#969AF9"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
|
||||||
|
stroke="#969AF9"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
|
||||||
|
stroke="#969AF9"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<p>{perm.permission}</p>
|
||||||
|
</div>
|
||||||
|
<div className={editUserStyle.deleteBtn}>
|
||||||
|
<div className={editUserStyle.deleteSvg}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3.61133 6.00684H16.3891"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M8.40234 9.20117V13.9928"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11.5977 9.20117V13.9928"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Permissions;
|
||||||
185
frontend/src/app/components/permissions/styles.module.css
Normal file
185
frontend/src/app/components/permissions/styles.module.css
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
.imanginaryDiv {
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
.userPermissions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex: 1 0 0;
|
||||||
|
align-self: stretch;
|
||||||
|
border-radius: 6px;
|
||||||
|
height: calc(100vh - 175px);
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.permissionsContainer {
|
||||||
|
display: flex;
|
||||||
|
padding: 24px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-self: stretch;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #1d1e2a;
|
||||||
|
background: color(display-p3 0.1138 0.1191 0.1616);
|
||||||
|
}
|
||||||
|
.permissionsHeader {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 17px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.permissionsHeader > p {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 5px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
|
||||||
|
color: #d2d3e1;
|
||||||
|
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: normal;
|
||||||
|
width: 163px;
|
||||||
|
}
|
||||||
|
.svgContainer {
|
||||||
|
display: flex;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 5px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #27293b;
|
||||||
|
background: color(display-p3 0.1529 0.1608 0.2275);
|
||||||
|
}
|
||||||
|
|
||||||
|
.svgContainer > div {
|
||||||
|
display: flex;
|
||||||
|
padding: 8px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #27293b;
|
||||||
|
background: color(display-p3 0.1529 0.1608 0.2275);
|
||||||
|
}
|
||||||
|
|
||||||
|
.permissionDefaultState {
|
||||||
|
display: flex;
|
||||||
|
height: 43.813px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.permissionDefaultState p {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
align-self: stretch;
|
||||||
|
color: #85869b;
|
||||||
|
color: color(display-p3 0.5216 0.5255 0.6);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.permissions {
|
||||||
|
display: flex;
|
||||||
|
height: 43.813px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
align-self: stretch;
|
||||||
|
border-bottom: 0.5px solid #2e3042;
|
||||||
|
border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
|
||||||
|
}
|
||||||
|
.permissions:hover {
|
||||||
|
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
|
||||||
|
border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
|
||||||
|
background: rgba(129, 135, 255, 0.05);
|
||||||
|
background: color(display-p3 0.5098 0.5294 1 / 0.05);
|
||||||
|
}
|
||||||
|
.permissionsItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.permissionsItem > p {
|
||||||
|
color: #d2d3e1;
|
||||||
|
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
.deleteBtn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.deleteSvg {
|
||||||
|
display: flex;
|
||||||
|
padding: 6px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #959aff00;
|
||||||
|
color: #969af9;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deleteSvg:hover {
|
||||||
|
color: #fff;
|
||||||
|
stroke-width: 1px;
|
||||||
|
stroke: color(display-p3 1 1 1);
|
||||||
|
border-radius: 100px;
|
||||||
|
border: 1px solid #959aff;
|
||||||
|
border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
|
||||||
|
background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
color(display-p3 0.4118 0.4196 0.5725) 0%,
|
||||||
|
color(display-p3 0.1241 0.1265 0.1725) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.permissionDefaultState {
|
||||||
|
display: flex;
|
||||||
|
height: 43.813px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.permissionDefaultState p {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex: 1 0 0;
|
||||||
|
align-self: stretch;
|
||||||
|
color: #85869b;
|
||||||
|
color: color(display-p3 0.5216 0.5255 0.6);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
35
frontend/src/app/components/searchbar/SearchBar.jsx
Normal file
35
frontend/src/app/components/searchbar/SearchBar.jsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import React from "react";
|
||||||
|
import searchBarStyle from "./styles.module.css";
|
||||||
|
|
||||||
|
const SearchBar = () => {
|
||||||
|
return (
|
||||||
|
<form className={searchBarStyle.searchBarContainer}>
|
||||||
|
<input
|
||||||
|
className={searchBarStyle.input}
|
||||||
|
type="text"
|
||||||
|
name=""
|
||||||
|
id=""
|
||||||
|
placeholder="Search"
|
||||||
|
/>
|
||||||
|
<div className={searchBarStyle.icon}>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
|
||||||
|
stroke="#858699"
|
||||||
|
strokeWidth={1.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SearchBar;
|
||||||
46
frontend/src/app/components/searchbar/styles.module.css
Normal file
46
frontend/src/app/components/searchbar/styles.module.css
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
.searchBarContainer {
|
||||||
|
display: flex;
|
||||||
|
width: 260px;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 6px 6px 6px 12px;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #31324a;
|
||||||
|
|
||||||
|
border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
|
||||||
|
}
|
||||||
|
.searchBarContainer > .input {
|
||||||
|
background-color: red;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
color: #85869b;
|
||||||
|
color: color(display-p3 0.5216 0.5255 0.6);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: -0.09px;
|
||||||
|
caret-color: #575bc7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::placeholder {
|
||||||
|
color: #85869b;
|
||||||
|
color: color(display-p3 0.5216 0.5255 0.6);
|
||||||
|
text-align: start;
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: -0.09px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user