l-min-components 1.0.598 → 1.0.604

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.598",
+  "version": "1.0.604",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AdminRolesPermission/assets/svg/backArrow.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export const BackArrowIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_3085_48537)">
+        <path
+          d="M20 11.5H7.83L13.42 5.91L12 4.5L4 12.5L12 20.5L13.41 19.09L7.83 13.5H20V11.5Z"
+          fill="#323232"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3085_48537">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/AdminRolesPermission/create/admins.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { AdminsContainer } from "./index.styled";
+import ButtonComponent from "../../button";
+import { adminList } from "./data";
+import Checkbox from "../../checkBoxes/checkbox/index2";
+import avatar from "../assets/images/avatar.png";
+import { IoFilterSharp } from "react-icons/io5";
+import SearchBar from "../../searchBar";
+
+const Admins = () => {
+  const [open, setOpen] = useState(false);
+  const handleChange = (newValue) => {
+    setChecked(newValue);
+  };
+
+  return (
+    <AdminsContainer>
+      <div className="ad_header">
+        <p className="ad_title">Admins</p>
+        <ButtonComponent
+          text={"Save & Add"}
+          styles={{ width: "120px", padding: 10, height: 40 }}
+          onClick={(e) => {
+            e.preventDefault();
+          }}
+        />
+      </div>
+
+      <div className="ad_filter_row">
+        <SearchBar
+          placeholder="Search Admins"
+          outlineColor="transparent"
+          heightSize="44px"
+          widthSize="100%"
+          border="1px solid #ADB2B2"
+          // onSubmit={setSearch}
+        />
+
+        <div className="ad_drop_filter">
+          <div className="ad_filter_box" onClick={() => setOpen(!open)}>
+            <IoFilterSharp />
+            All
+          </div>
+
+          {open && (
+            <div className="ad_filter_body">
+              <p className="afb_item"> Manager</p>
+              <p className="afb_item"> IT</p>
+              <p className="afb_item"> Security </p>
+              <p className="afb_item"> CMS </p>
+              <p className="afb_item"> Unassigned </p>
+              <p className="afb_item"> Undefined</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="ad_body">
+        {adminList?.map((item, idx) => (
+          <div className="ad_list_row" key={idx}>
+            <div className="adl_box">
+              <Checkbox
+                label=""
+                color="#ff9900"
+                defaultValue={item.selection}
+                onChange={handleChange}
+                className="adm_check"
+              />
+            </div>
+
+            <div className="adl_wrapper">
+              <div className="adl_img">
+                <img src={item?.image} alt="" />
+              </div>
+
+              <div>
+                <p className="adl_title">{item?.name}</p>
+                <span className="adl_stat"> {item?.status}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </AdminsContainer>
+  );
+};
+
+export default Admins;

package/src/components/AdminRolesPermission/create/data.js

@@ -0,0 +1,129 @@
+import avatar from "../assets/images/avatar.png"
+
+export const permissionsData = [
+  {
+    title: "Skill Test",
+  },
+  {
+    title: "Lesson",
+  },
+  {
+    title: "Manage Content",
+  },
+  {
+    title: "Flagged Content",
+  },
+  {
+    title: "Jet Fuel",
+  },
+  {
+    title: "Settings",
+  },
+];
+
+export const roleList = [
+    {
+        name: "Statistics",
+        level: 3
+    },
+    {
+        name: "CMS",
+        level: 3
+    },
+    {
+        name: "Support",
+        level: 3
+    },
+    {
+        name: "Admin",
+        level: 3
+    },
+    {
+        name: "Statistics",
+        level: 3
+    },
+    {
+        name: "Statistics",
+        level: 3
+    },
+    {
+        name: "Statistics",
+        level: 3
+    },
+]
+
+
+export const adminList = [
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+    {
+        name: "Acme Co.",
+        status: "Unassigned",
+        image: avatar,
+        selection: false,
+    },
+]

package/src/components/AdminRolesPermission/create/index.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { AdminRolesCreateContainer } from "./index.styled";
+import { BackArrowIcon } from "../assets/svg/backArrow";
+import RoleName from "./role-name";
+import Permissions from "./permissions";
+import Admins from "./admins";
+
+const AdminRolesCreate = () => {
+  const [type, setType] = useState("permissions");
+
+  return (
+    <AdminRolesCreateContainer>
+      <div className="arp_header">
+        <p className="arp_title">
+          <span onClick={() => navigate(-1)}>
+            <BackArrowIcon />
+          </span>
+          Create New Role{" "}
+        </p>
+        <p className="arp_ref">
+          Settings <span className="slash">/</span> Roles&permissions{" "}
+          <span className="slash">/</span> <span>Create New</span>
+        </p>
+      </div>
+
+      <div className="arp_create_row">
+        <div className="arp_detail_one">
+          <RoleName />
+        </div>
+
+        <div className="hr_line"></div>
+
+        <div className="arp_role_list">
+          {type === "permissions" && <Admins />}
+          {type === "permissions" && <Permissions />}
+        </div>
+      </div>
+    </AdminRolesCreateContainer>
+  );
+};
+
+export default AdminRolesCreate;

package/src/components/AdminRolesPermission/create/index.styled.js

@@ -0,0 +1,346 @@
+import styled from "styled-components";
+
+export const AdminRolesCreateContainer = styled.div`
+  .hr_line {
+    border-radius: 31px;
+    background: #d9d9d9;
+    height: 100vh;
+    width: 1px;
+  }
+
+  .arp_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    .arp_title {
+      color: #1c2434;
+      font-size: 18px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      span {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .arp_ref {
+      color: #64748b;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: normal;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      span {
+        color: #3c50e0;
+      }
+
+      .slash {
+        color: #64748b;
+      }
+    }
+  }
+
+  .arp_create_row {
+    display: flex;
+    width: 100%;
+
+    .arp_detail_one {
+      width: 40%;
+    }
+
+    .arp_role_list {
+      width: 58%;
+    }
+  }
+`;
+
+export const RoleNameContainer = styled.div`
+  padding-right: 31px;
+
+  .rl_title {
+    color: #c6cccc;
+    font-size: 40px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+
+  .rl_perm_txt {
+    color: #4a4d4d;
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.4px;
+    margin-bottom: 6px;
+  }
+  .rl_perm_subtxt {
+    color: #adb2b2;
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 0.32px;
+    margin-bottom: 16px;
+  }
+  .role_list_row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 16px;
+
+    .rlr_col {
+      padding: 8px;
+      height: 28px;
+      border-radius: 44px;
+      border: 1px solid #099;
+      background: rgba(0, 194, 194, 0.1);
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      color: #099;
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: 0.24px;
+
+      span {
+        border-radius: 100%;
+        background: #00c2c2;
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.24px;
+      }
+    }
+
+    .rlr_others {
+      margin-left: 6px;
+      color: #099;
+      font-size: 15px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .admins_row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 16px;
+
+    .adm_others {
+      margin-left: 6px;
+      color: #00c2c2;
+      font-size: 16px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+    }
+
+    .adm_img_group {
+      position: relative;
+      display: flex;
+      align-items: center;
+      max-width: 90px;
+      width: 100%;
+
+      .adr_img {
+        width: 38px;
+        height: 38px;
+        border-radius: 100%;
+        border: 1px solid #c6cccc;
+        background: #c6cccc;
+
+        &:nth-child(2) {
+          position: absolute;
+          left: 26px;
+        }
+        &:nth-child(3) {
+          position: absolute;
+          left: 53px;
+        }
+        img {
+          width: 100%;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+`;
+
+export const PermissionsContainer = styled.div`
+  padding-left: 25px;
+
+  .pm_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 26px;
+
+    .pm_title {
+      color: #4a4d4d;
+      font-size: 24px;
+      font-weight: 700;
+      line-height: normal;
+    }
+  }
+`;
+
+export const PermissionsAccordion = styled.div`
+  border-radius: 12px;
+  background: #f5f7f7;
+  padding: 12px;
+  margin-bottom: 20px;
+  transition: 0.3 all;
+
+  .rc-accordion-toggle {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    color: #636666;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 700;
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .rc-collapse {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+  }
+  .rc-collapse.show {
+    height: auto;
+  }
+
+  .rc-accordion-toggle.active .rc-accordion-icon {
+    transform: rotate(180deg);
+  }
+`;
+
+export const AdminsContainer = styled.div`
+  padding-left: 25px;
+
+  .ad_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 26px;
+
+    .ad_title {
+      color: #4a4d4d;
+      font-size: 24px;
+      font-weight: 700;
+      line-height: normal;
+    }
+  }
+
+  .ad_filter_row {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    width: 100%;
+    justify-content: space-between;
+
+    .ad_drop_filter {
+        position: relative;
+    }
+
+    .ad_filter_box {
+      border-radius: 12px;
+      border: 1px solid #c6cccc;
+      background: #fff;
+      min-width: 170px;
+      height: 44px;
+      padding: 10px 20px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      color: #636666;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .ad_filter_body {
+      position: absolute;
+      top: 50px;
+      left: 0;
+      min-width: 170px;
+      border-radius: 8px;
+      background: #fff;
+      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
+      height: 236px;
+      padding: 8px;
+      .afb_item {
+        padding: 8px;
+        color: #1c1c1c;
+        font-family: "Inter";
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .ad_body {
+    .ad_list_row {
+      display: flex;
+      padding: 14px 0;
+      align-items: center;
+      border-bottom: 1px solid #dfe5e5;
+
+      .adl_box {
+        margin-right: 16px;
+        .adm_check > span {
+          border-radius: 8px;
+        }
+      }
+
+      .adl_wrapper {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        .adl_img {
+          width: 38px;
+          height: 38px;
+          background: #c6cccc;
+          border-radius: 100%;
+          img {
+            width: 100%;
+            border-radius: 100%;
+          }
+        }
+
+        .adl_title {
+          color: #03091d;
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 2px;
+        }
+
+        .adl_stat {
+          padding: 1px 6px;
+          border-radius: 37px;
+          background: #f5f7f7;
+          color: #949999;
+          font-size: 12px;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+`;

package/src/components/AdminRolesPermission/create/permissions.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useRef } from "react";
+import { PermissionsAccordion, PermissionsContainer } from "./index.styled";
+import ButtonComponent from "../../button";
+import { permissionsData } from "./data";
+import { IoChevronDown } from "react-icons/io5";
+
+const Permissions = () => {
+  const contentEl = useRef();
+  const [active, setActive] = useState(null);
+
+  const handleToggle = (index) => {
+    if (active === index) {
+      setActive(null);
+    } else {
+      setActive(index);
+    }
+  };
+  return (
+    <PermissionsContainer>
+      <div className="pm_header">
+        <p className="pm_title">Permissions</p>
+        <ButtonComponent
+          text={"Save & Add"}
+          styles={{ width: "120px", padding: 10, height: 40 }}
+          onClick={(e) => {
+            e.preventDefault();
+          }}
+        />
+      </div>
+
+      <div className="pm_body">
+        {permissionsData?.map((item, idx) => (
+          <PermissionsAccordion key={idx}>
+            <div
+              className={`rc-accordion-toggle  ${
+                active === idx ? "active" : ""
+              }`}
+              onClick={() => handleToggle(idx)}
+            >
+              {item?.title}
+
+              <span className="rc-accordion-icon">
+                <IoChevronDown />
+              </span>
+            </div>
+
+            <div
+              ref={contentEl}
+              className={`rc-collapse ${active === idx ? "show" : ""}`}
+              style={active === idx ? { height: "auto" } : { height: "0px" }}
+            ></div>
+          </PermissionsAccordion>
+        ))}
+      </div>
+    </PermissionsContainer>
+  );
+};
+
+export default Permissions;