l-min-components 1.0.601 → 1.0.607

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

@@ -0,0 +1,415 @@
+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_sl {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      .adm_check > span {
+        border-radius: 8px;
+      }
+
+      .rc-accordion-icon {
+        margin-left: 12px;
+      }
+    }
+  }
+
+  .rc-collapse {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.35s ease;
+
+    .rc_body_main {
+      border-bottom: 1px solid #d9d9d9;
+      padding: 10px 0;
+
+      .rcb_header {
+        color: #616161;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: normal;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        justify-content: space-between;
+        margin-bottom: 12px;
+      }
+
+      .rcb_body {
+        display: flex;
+        gap: 20px;
+        justify-content: space-between;
+
+        .rcb_lang_list {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 8px;
+
+          .rcb_lang_box {
+            border-radius: 48px;
+            background: #dfe5e5;
+            padding: 6px;
+            height: 31px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+        }
+        .sel_lang_dropdown {
+          width: 230px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 10px 20px;
+          color: #adb2b2;
+          font-size: 16px;
+          font-weight: 400;
+          letter-spacing: 0.32px;
+          border-radius: 12px;
+          border: 1px solid #c6cccc;
+          background: #fff;
+        }
+      }
+    }
+  }
+  .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;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,165 @@
+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";
+import Checkbox from "../../checkBoxes/checkbox/index2";
+import { EnglishFlag } from "../assets/svg/englishFlag";
+import { CloseRedIcon } from "../assets/svg/close-red";
+import { PortugalFlag } from "../assets/svg/portugalFlag";
+import { FrenchFlag } from "../assets/svg/frenchFlag";
+import { GermanFlag } from "../assets/svg/germanFlag";
+import ToggleButtonComponent from "../../toggle button";
+import { FaChevronDown } from "react-icons/fa";
+import PreviewModal from "../modals/preview-modal";
+
+const Permissions = () => {
+  const contentEl = useRef();
+  const [active, setActive] = useState(null);
+  const [toggleValue, setToggleValue] = useState(false);
+  const [addModal, setAddModal] = useState(false);
+
+  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();
+            setAddModal(true)
+          }}
+        />
+      </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}
+
+              <div className="rc_sl"       >
+                {active === idx && (
+                  <span  onClick={(e) => {
+                    e.stopPropagation();
+                  }}>
+                    <Checkbox
+                      label=""
+                      color="#ff9900"
+                      defaultValue={false}
+                      // onChange={handleChange}
+                      className="adm_check"
+                    />
+                    All Permissions
+                  </span>
+                )}
+
+                <span className="rc-accordion-icon">
+                  <IoChevronDown />
+                </span>
+              </div>
+            </div>
+
+            <div
+              ref={contentEl}
+              className={`rc-collapse ${active === idx ? "show" : ""}`}
+              style={active === idx ? { height: "auto" } : { height: "0px" }}
+            >
+              <div className="rc_body_main">
+                <div className="rcb_header">
+                  Permission to create content in any base language
+                  <div className="rc_toggle">
+                    <ToggleButtonComponent
+                      value={toggleValue}
+                      // onClick={() => setToggleValue(!toggleValue)}
+                    />
+                  </div>
+                </div>
+
+                <div className="rcb_body">
+                  <div className="rcb_lang_list">
+                    <div className="rcb_lang_box">
+                      <EnglishFlag /> English US <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <PortugalFlag />
+                      Portugese
+                      <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <FrenchFlag /> French <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <GermanFlag /> German
+                      <CloseRedIcon />
+                    </div>
+                  </div>
+
+                  <div className="sel_lang_dropdown">
+                    Select Language <FaChevronDown />{" "}
+                  </div>
+                </div>
+              </div>
+              <div className="rc_body_main">
+                <div className="rcb_header">
+                  Permission to review versions of a base language’s content -
+                  level 1 
+                  <div className="rc_toggle">
+                    <ToggleButtonComponent />
+                  </div>
+                </div>
+
+                <div className="rcb_body">
+                  <div className="rcb_lang_list">
+                    <div className="rcb_lang_box">
+                      <EnglishFlag /> English US <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <PortugalFlag />
+                      Portugese
+                      <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <FrenchFlag /> French <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <GermanFlag /> German
+                      <CloseRedIcon />
+                    </div>
+                  </div>
+
+                  <div className="sel_lang_dropdown">
+                    Select Language <FaChevronDown />{" "}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </PermissionsAccordion>
+        ))}
+      </div>
+
+      <PreviewModal
+        isOpen={addModal}
+        onRequestClose={() => setAddModal(false)}
+        title={"Are you sure you want to add these permissions to this role?"}
+        secondaryButtonText={"No, Cancel"}
+        primaryButtonText={"Yes, Add"}
+      />
+    </PermissionsContainer>
+  );
+};
+
+export default Permissions;

package/src/components/AdminRolesPermission/create/role-name.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { RoleNameContainer } from "./index.styled";
+import ButtonComponent from "../../button";
+import { roleList } from "./data";
+import avatar from "../assets/images/avatar.png"
+
+const RoleName = () => {
+  return (
+    <RoleNameContainer>
+      <p className="rl_title">Enter role name</p>
+
+      <p className="rl_perm_txt">Permissions</p>
+      <p className="rl_perm_subtxt">
+        Permissions allow admins to access specific functions and perform
+        actions.
+      </p>
+      <div className="role_list_row">
+        {roleList?.slice(0, 4)?.map((item, idx) => (
+          <div className="rlr_col" key={idx}>
+            {item?.name} <span>{item?.level}</span>
+          </div>
+        ))}
+        {roleList?.slice(0, 4)?.length > 0 && (
+          <p className="rlr_others">
+            {`+ ${roleList?.slice(0, 4)?.length} Others`}
+          </p>
+        )}
+      </div>
+      <ButtonComponent
+        text={"Add Permissions(s)"}
+        type="secondary"
+        styles={{
+          width: "260px",
+          padding: 10,
+          height: 40,
+          backgroundColor: "transparent",
+          marginBottom: "24px",
+        }}
+        icon={{ left: true }}
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      />
+      <p className="rl_perm_txt">Admins</p>
+      <p className="rl_perm_subtxt">
+        Add admins to this role and have them access specific permissions.{" "}
+      </p>
+
+      <div className="admins_row">
+        <div className="adm_img_group">
+          <div className="adr_img">
+            <img src={avatar} alt="" />
+          </div>
+          <div className="adr_img">
+            <img src={avatar} alt="" />
+          </div>
+          <div className="adr_img">
+            <img src={avatar} alt="" />
+          </div>
+        </div>
+
+        <div className="adm_others">+24 Others</div>
+      </div>
+      <ButtonComponent
+        text={"Add Admins"}
+        type="secondary"
+        styles={{
+          width: "260px",
+          padding: 10,
+          height: 40,
+          backgroundColor: "transparent",
+          marginBottom: "24px",
+        }}
+        icon={{ left: true }}
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      />
+
+      <ButtonComponent
+        text={"Create Role"}
+        styles={{ width: "100%", padding: 10, height: 40, marginTop: "60px" }}
+        icon={{ left: true }}
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      />
+    </RoleNameContainer>
+  );
+};
+
+export default RoleName;