l-min-components 1.0.503 → 1.0.511

package/src/components/AdminNavbar/assets/svg/add.jsx

@@ -0,0 +1,14 @@
+export const AddIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "21"}
+    height={height || "20"}
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.5 5H9.5V9H5.5V11H9.5V15H11.5V11H15.5V9H11.5V5ZM10.5 0C4.98 0 0.5 4.48 0.5 10C0.5 15.52 4.98 20 10.5 20C16.02 20 20.5 15.52 20.5 10C20.5 4.48 16.02 0 10.5 0ZM10.5 18C6.09 18 2.5 14.41 2.5 10C2.5 5.59 6.09 2 10.5 2C14.91 2 18.5 5.59 18.5 10C18.5 14.41 14.91 18 10.5 18Z"
+      fill="#FEBF10"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/arrow-down.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+export const ArrowDownIcon = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.41205 6.91205C4.73748 6.58661 5.26512 6.58661 5.59056 6.91205L10.0013 11.3228L14.4121 6.91205C14.7375 6.58661 15.2651 6.58661 15.5906 6.91205C15.916 7.23748 15.916 7.76512 15.5906 8.09056L10.5906 13.0906C10.2651 13.416 9.73749 13.416 9.41205 13.0906L4.41205 8.09056C4.08661 7.76512 4.08661 7.23748 4.41205 6.91205Z"
+      fill="#637381"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/book.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+export const BookIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "23"}
+    height={height || "24"}
+    viewBox="0 0 23 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M21.0807 16.1404V4.57336C21.0807 3.42336 20.1416 2.57044 19.0011 2.66627H18.9436C16.9311 2.83877 13.8741 3.86419 12.1682 4.93752L12.0053 5.04294C11.7274 5.21544 11.2674 5.21544 10.9895 5.04294L10.7499 4.89919C9.04406 3.83544 5.99656 2.81961 3.98406 2.65669C2.84365 2.56086 1.91406 3.42336 1.91406 4.56377V16.1404C1.91406 17.0604 2.66156 17.9229 3.58156 18.0379L3.85948 18.0763C5.93906 18.3542 9.14948 19.4084 10.9895 20.4146L11.0278 20.4338C11.2866 20.5775 11.6986 20.5775 11.9478 20.4338C13.7878 19.4179 17.0078 18.3542 19.097 18.0763L19.4132 18.0379C20.3332 17.9229 21.0807 17.0604 21.0807 16.1404Z"
+      stroke="#00C2C2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.5 5.35938V19.7344"
+      stroke="#00C2C2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.42969 8.23438H5.27344"
+      stroke="#00C2C2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.14844 11.1094H5.27344"
+      stroke="#00C2C2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/chevron-ddown.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+export const SettingIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "17"}
+    height={width || "21"}
+    viewBox="0 0 17 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.48398 20.5025L0.015625 15.5998V5.79433L8.48398 0.891602L16.9523 5.79433V15.5998L8.48398 20.5025ZM8.48398 2.95253L1.79844 6.82212V14.572L8.48398 18.4425L15.1695 14.572V6.82212L8.48398 2.95164V2.95253ZM8.48398 14.2627C7.53863 14.26 6.63248 13.8846 5.96219 13.218C4.94264 12.1981 4.63778 10.6645 5.18977 9.33225C5.74176 7.99999 7.04189 7.13144 8.48398 7.13144C9.4291 7.13398 10.335 7.50942 11.0049 8.17617C12.3968 9.56855 12.3968 11.8256 11.0049 13.218C10.3349 13.8845 9.42904 14.2599 8.48398 14.2627ZM8.48398 8.91425C7.63344 8.91407 6.90121 9.51474 6.73511 10.3489C6.56901 11.1831 7.01531 12.0184 7.80105 12.344C8.58679 12.6697 9.49313 12.3949 9.96579 11.6878C10.4384 10.9807 10.3458 10.0381 9.74443 9.43662C9.41083 9.10125 8.95701 8.91317 8.48398 8.91425Z"
+      fill="#4A4D4D"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/close.jsx

@@ -0,0 +1,15 @@
+export const CloseIcon = ({ width, height, fill, onClick }) => (
+  <svg
+    onClick={onClick}
+    width={width || "12"}
+    height={height || "12"}
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.8307 1.3415L10.6557 0.166504L5.9974 4.82484L1.33906 0.166504L0.164062 1.3415L4.8224 5.99984L0.164062 10.6582L1.33906 11.8332L5.9974 7.17484L10.6557 11.8332L11.8307 10.6582L7.1724 5.99984L11.8307 1.3415Z"
+      fill="#323232"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/coolicon.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.046875 1.13489L4.99646 6.08447L9.94604 1.13489L9.12121 0.309473L4.99646 4.43481L0.871708 0.309473L0.046875 1.13489Z" fill="#323232"/>
+</svg>

package/src/components/AdminNavbar/assets/svg/message.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+export const MessageIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "22"}
+    height={width || "22"}
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.96601 16.9366H7.52031C3.95469 16.9366 2.17188 16.0452 2.17188 11.5882V7.13115C2.17188 3.56553 3.95469 1.78271 7.52031 1.78271H14.6516C18.2172 1.78271 20 3.56553 20 7.13115V11.5882C20 15.1538 18.2172 16.9366 14.6516 16.9366H14.2059C13.9295 16.9366 13.6621 17.0703 13.4927 17.2932L12.1556 19.076C11.5673 19.8604 10.6046 19.8604 10.0162 19.076L8.67914 17.2932C8.53651 17.0971 8.20669 16.9366 7.96601 16.9366Z"
+      stroke="#4A4D4D"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14.6517 9.80557H14.6598"
+      stroke="#4A4D4D"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.0814 9.80557H11.0894"
+      stroke="#7C8080"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.51893 9.80557H7.52694"
+      stroke="#7C8080"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/notification.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+export const NotificationIcon = ({ width, height, fill }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.0186 2.91016C8.70862 2.91016 6.01862 5.60016 6.01862 8.91016V11.8002C6.01862 12.4102 5.75862 13.3402 5.44862 13.8602L4.29862 15.7702C3.58862 16.9502 4.07862 18.2602 5.37862 18.7002C9.68862 20.1402 14.3386 20.1402 18.6486 18.7002C19.8586 18.3002 20.3886 16.8702 19.7286 15.7702L18.5786 13.8602C18.2786 13.3402 18.0186 12.4102 18.0186 11.8002V8.91016C18.0186 5.61016 15.3186 2.91016 12.0186 2.91016Z"
+      stroke="#313333"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+    />
+    <path
+      d="M13.8719 3.20141C13.5619 3.11141 13.2419 3.04141 12.9119 3.00141C11.9519 2.88141 11.0319 2.95141 10.1719 3.20141C10.4619 2.46141 11.1819 1.94141 12.0219 1.94141C12.8619 1.94141 13.5819 2.46141 13.8719 3.20141Z"
+      stroke="#313333"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.0195 19.0586C15.0195 20.7086 13.6695 22.0586 12.0195 22.0586C11.1995 22.0586 10.4395 21.7186 9.89953 21.1786C9.35953 20.6386 9.01953 19.8786 9.01953 19.0586"
+      stroke="#313333"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/people.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+export const PeopleIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "19"}
+    height={height || "19"}
+    viewBox="0 0 19 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9.69453 2.88144C10.3479 2.14119 11.3038 1.67432 12.3687 1.67432C14.338 1.67432 15.9344 3.2707 15.9344 5.23994C15.9344 7.20918 14.338 8.80556 12.3687 8.80556C11.3038 8.80556 10.3479 8.33868 9.69453 7.59844M12.3687 17.7196H1.67188V16.8282C1.67188 13.8744 4.06645 11.4798 7.02031 11.4798C9.97417 11.4798 12.3687 13.8744 12.3687 16.8282V17.7196ZM12.3687 17.7196H17.7172V16.8282C17.7172 13.8744 15.3226 11.4798 12.3687 11.4798C11.3946 11.4798 10.4812 11.7402 9.69453 12.1953M10.5859 5.23994C10.5859 7.20918 8.98955 8.80556 7.02031 8.80556C5.05107 8.80556 3.45469 7.20918 3.45469 5.23994C3.45469 3.2707 5.05107 1.67432 7.02031 1.67432C8.98955 1.67432 10.5859 3.2707 10.5859 5.23994Z"
+      stroke="#313333"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/components/AdminNavbar/assets/svg/search.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+export const SearchIcon = ({ width, height, fill }) => (
+  <svg
+    width={width || "22"}
+    height={height || "22"}
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.2496 19.2194C14.9265 19.2194 18.718 15.428 18.718 10.7511C18.718 6.07413 14.9265 2.28271 10.2496 2.28271C5.57266 2.28271 1.78125 6.07413 1.78125 10.7511C1.78125 15.428 5.57266 19.2194 10.2496 19.2194Z"
+      stroke="#4A4D4D"
+      strokeWidth="1.33711"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.6109 20.1109L17.8281 18.3281"
+      stroke="#4A4D4D"
+      strokeWidth="1.33711"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+
+export const InputSearchIcon = ({ width, height, fill }) => (
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <g clip-path="url(#clip0_15174_273132)">
+    <path d="M8.33333 14.1667C11.555 14.1667 14.1667 11.555 14.1667 8.33333C14.1667 5.11167 11.555 2.5 8.33333 2.5C5.11167 2.5 2.5 5.11167 2.5 8.33333C2.5 11.555 5.11167 14.1667 8.33333 14.1667Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M17.5 17.5L12.5 12.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_15174_273132">
+      <rect width="20" height="20" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
+);

package/src/components/AdminNavbar/index.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import {
+  Navbar,
+  SearchInputGroup,
+  SearchInput,
+  NavGroup,
+  AdminAccount,
+} from "./index.styled";
+import { SearchIcon } from "./assets/svg/search";
+import { NotificationIcon } from "./assets/svg/notification";
+import { ArrowDownIcon } from "./assets/svg/arrow-down";
+
+const AdminNavbar = () => {
+  const [searchResultOpen, setSearchResultOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  return (
+    <Navbar>
+      <SearchInputGroup>
+        <SearchIcon />
+        <SearchInput
+          type="search"
+          value=""
+          id="adminSearch"
+          name="search"
+          placeholder="Type to search..."
+          onChange={(e) => setSearch(e.target.value)}
+        />
+
+        {searchResultOpen && (
+          <div className="search-result-wrapper">
+            <p>
+              Website <span>UIUX </span> Design
+            </p>
+          </div>
+        )}
+      </SearchInputGroup>
+
+      <NavGroup>
+        <span className="notification__bell">
+          <NotificationIcon />
+        </span>
+
+        <AdminAccount>
+          <div className="admin__info">
+            <p className="admin_name"> Thomas Anree</p>
+            <p className="admin_role"> Ux Designer </p>
+          </div>
+          <div className="profile__box">
+            <div className="img_box">
+              <img src="" alt="" />
+            </div>
+            <span>
+              <ArrowDownIcon />
+            </span>
+          </div>
+        </AdminAccount>
+      </NavGroup>
+    </Navbar>
+  );
+};
+
+export default AdminNavbar;

package/src/components/AdminNavbar/index.styled.js

@@ -0,0 +1,202 @@
+import styled from "styled-components";
+
+/* styles for header component authenticated users */
+export const Navbar = styled.nav`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 17px 30px;
+  display: flex;
+  font-family: "Nunito";
+  width: 100%;
+  align-items: center;
+  /* justify-content: space-between; */
+  position: fixed;
+  z-index: 555;
+`;
+
+export const NavGroup = styled.div`
+  width: 24%;
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 55px;
+
+  .notification__bell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    background: #e6f9f9;
+    width: 44px;
+    height: 44px;
+  }
+`;
+
+export const Nav = styled.ul`
+  display: flex;
+  list-style: none;
+  align-items: center;
+  margin: 0 10px;
+  padding: 0 5px;
+  width: 57%;
+
+  & li {
+    display: flex;
+    align-items: center;
+    margin: 0 10px;
+  }
+
+  & li:nth-of-type(1) {
+    margin-right: 75px;
+    margin-left: 35px;
+  }
+
+  & a.active {
+    color: rgba(0, 194, 194, 1) !important;
+    font-size: 21px;
+    font-weight: 600;
+    & svg path {
+      stroke: rgba(0, 194, 194, 1);
+    }
+  }
+
+  & a {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    color: #4a4d4d;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    position: relative;
+
+    &:hover:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: -9px;
+      width: 40px;
+      height: 4px;
+      background-color: rgba(0, 194, 194, 1);
+      transition: width 0.3s ease-in-out;
+    }
+
+    & svg {
+      margin-right: 12px;
+    }
+
+    &:hover {
+      color: rgba(0, 194, 194, 1);
+      // border-bottom: 2px solid rgba(0, 194, 194, 1);
+      & svg path {
+        stroke: rgba(0, 194, 194, 1);
+      }
+    }
+  }
+`;
+
+export const SearchInputGroup = styled.div`
+  background-color: transparent;
+  width: 45%;
+  transition: 0.5s;
+  display: flex;
+  align-items: center;
+  padding: 9px;
+  margin: 0 15px;
+  position: relative;
+
+  &::placeholder {
+    color: rgba(173, 178, 178, 1);
+  }
+
+  & .search-result-wrapper {
+    position: absolute;
+    width: 300px;
+    height: 221px;
+    background-color: #ffffff;
+    box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.08);
+    border-radius: 29px;
+    top: 56px;
+    right: -23px;
+    padding: 25px;
+
+    & p {
+      font-size: 16px;
+      line-height: 22px;
+      font-family: "Nunito";
+      color: #000000;
+      margin-bottom: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      & span {
+        font-weight: 700;
+      }
+    }
+  }
+`;
+
+export const SearchInput = styled.input`
+  background-color: transparent;
+  padding: 0 8px;
+  font-size: 16px;
+  font-weight: 400;
+  border: none;
+  color: rgba(173, 179, 179, 1);
+  transition: 0.5s;
+  outline: none;
+  box-shadow: none;
+  width: 100%;
+  &:active {
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+  &::placeholder {
+    color: rgba(173, 178, 178, 1);
+  }
+`;
+
+export const AdminAccount = styled.div`
+  display: flex;
+  gap: 30px;
+  .admin__info {
+    .admin_name {
+      color: #212b36;
+      text-align: right;
+      font-family: "Nunito", sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: normal;
+    }
+
+    .admin_role {
+      color: #637381;
+      text-align: right;
+      font-family: "Nunito", sans-serif;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: normal;
+    }
+  }
+
+  .profile__box {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    .img_box {
+      width: 46px;
+      height: 46px;
+      background-color: #637381;
+      border-radius: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+      }
+    }
+  }
+`;

package/src/components/AdminSidebar/assets/svg/chevronIcon.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+export const ChevronIcon = ({ width, height, style }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <path
+      d="M12.0017 16.3477L18.0117 10.3377L16.5977 8.92266L11.9977 13.5227L7.39772 8.92266L5.99072 10.3377L12.0017 16.3477Z"
+      fill="#636666"
+    />
+  </svg>
+);
+
+export const ChevronIconActive = ({ width, height, fill, style }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    style={style}
+  >
+    <path
+      d="M12.0017 16.3477L18.0117 10.3377L16.5977 8.92266L11.9977 13.5227L7.39772 8.92266L5.99072 10.3377L12.0017 16.3477Z"
+      fill={fill}
+    />
+  </svg>
+);

package/src/components/AdminSidebar/assets/svg/logoutIcon.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+export const LogoutIcon = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+  >
+    <g clip-path="url(#clip0_2736_63595)">
+      <path
+        d="M13 3.63672H11V13.6367H13V3.63672ZM17.83 5.80672L16.41 7.22672C17.99 8.49672 19 10.4467 19 12.6367C19 16.5067 15.87 19.6367 12 19.6367C8.13 19.6367 5 16.5067 5 12.6367C5 10.4467 6.01 8.49672 7.58 7.21672L6.17 5.80672C4.23 7.45672 3 9.89672 3 12.6367C3 17.6067 7.03 21.6367 12 21.6367C16.97 21.6367 21 17.6067 21 12.6367C21 9.89672 19.77 7.45672 17.83 5.80672Z"
+        fill="#F95454"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2736_63595">
+        <rect
+          width="24"
+          height="24"
+          fill="white"
+          transform="translate(0 0.636719)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const LogoutIconActive = ({ width, height, fill }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+  >
+    <g clip-path="url(#clip0_2736_63595)">
+      <path
+        d="M13 3.63672H11V13.6367H13V3.63672ZM17.83 5.80672L16.41 7.22672C17.99 8.49672 19 10.4467 19 12.6367C19 16.5067 15.87 19.6367 12 19.6367C8.13 19.6367 5 16.5067 5 12.6367C5 10.4467 6.01 8.49672 7.58 7.21672L6.17 5.80672C4.23 7.45672 3 9.89672 3 12.6367C3 17.6067 7.03 21.6367 12 21.6367C16.97 21.6367 21 17.6067 21 12.6367C21 9.89672 19.77 7.45672 17.83 5.80672Z"
+        fill="#F95454"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2736_63595">
+        <rect
+          width="24"
+          height="24"
+          fill="white"
+          transform="translate(0 0.636719)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);