l-min-components 0.2.0

package/src/components/select/index.jsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  SelectWrapper,
+  Dropdown,
+  DropdownItem,
+  SearchInput,
+  Label,
+  Icon,
+} from "./styles";
+
+/**
+ * @param {{
+* dropdownData: Array,
+* header: string,
+* searchable: boolean,
+* className: string,
+* onSelect: Function,
+* inputPlaceHolder: string,
+* size: string,
+* }} props - properties of the dropdown component
+*/
+
+const Select = ({
+  onSelect,
+  dropdownData,
+  searchable,
+  inputPlaceholder,
+  borderRadius,
+  size,
+  label,
+  color,
+  animate,
+  bordered,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState(dropdownData);
+
+  const handleSelect = (selectedValue) => {
+    onSelect(selectedValue);
+    setIsOpen(false);
+    setSearchTerm(
+      dropdownData.find((item) => item.value === selectedValue).name
+    );
+  };
+
+  const handleSearch = (searchValue) => {
+    setSearchTerm(searchValue);
+  };
+
+  const handleClickIcon = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <SelectWrapper>
+      <Label size={size} color={color}>
+        {label}
+      </Label>
+      <SearchInput
+        bordered={bordered}
+        searchable={searchable}
+        size={size}
+        color={color}
+        borderRadius={borderRadius}
+        type="text"
+        placeholder={inputPlaceholder}
+        value={searchTerm}
+        onChange={(e) => handleSearch(e.target.value)}
+        onFocus={() => setIsOpen(true)}
+      />
+      <Icon size={size} color={color} onClick={handleClickIcon} />
+      {isOpen && (
+        <Dropdown borderRadius={borderRadius} animate={animate}>
+          {filteredData.map(({ value, name }, index) => (
+            <DropdownItem
+              key={value}
+              size={size}
+              color={color}
+              onClick={() => handleSelect(value)}
+              active={name?.toLowerCase() === searchTerm.toLowerCase()}
+            >
+              {name}
+            </DropdownItem>
+          ))}
+        </Dropdown>
+      )}
+    </SelectWrapper>
+  );
+};
+
+Select.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+  dropdownData: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  searchable: PropTypes.bool,
+  inputPlaceholder: PropTypes.string,
+  borderRadius: PropTypes.string,
+  size: PropTypes.number,
+  label: PropTypes.string,
+  color: PropTypes.string,
+  animate: PropTypes.bool,
+  bordered: PropTypes.bool,
+};
+
+Select.defaultProps = {
+  searchable: false,
+  inputPlaceholder: "",
+  borderRadius: "3px",
+  size: 16,
+  label: "",
+  color: "",
+  animate: false,
+  bordered: false,
+};
+
+export default Select;

package/src/components/select/styles/index.jsx

@@ -0,0 +1,98 @@
+import styled, { css, keyframes } from "styled-components";
+import { FaAngleDown } from "react-icons/fa";
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+     transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+     transform: translateY(0);
+  }
+`;
+
+export const SelectWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+ 
+`;
+export const Dropdown = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: #ffffff;
+  border-radius: ${({ borderRadius }) => borderRadius}px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  animation: ${({ animate }) => (animate ? fadeIn : "none")} 0.2s ease-in-out;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: #f5f5f5;
+  }
+
+  /* color of scrollbar handle */
+  &::-webkit-scrollbar-thumb {
+    background-color: ${({ color }) => color};
+    border-radius: 5px;
+  }
+
+  /* hover effect on scrollbar handle */
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #a6a6a6;
+  }
+`;
+
+export const DropdownItem = styled.div`
+  padding: 8px 16px;
+  font-size: ${({ size }) => size}px;
+
+  cursor: pointer;
+
+  color: ${({ active, color }) => active ? "#ffffff" : color };
+  background: ${({ active, color }) => active ? "#ffbf36" : "rgba(255, 255, 255, 0.507)" };
+
+  &:hover {
+    background-color: #f7f7f7;
+  }
+`;
+
+export const SearchInput = styled.input`
+  display: ${({ searchable }) => (searchable ? "block" : "none")};
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-size: ${({ size }) => size}px;
+  border-radius: ${({ borderRadius }) => borderRadius}px;
+  color: ${({ color }) => color};
+  outline: none;
+  ${({ bordered, color }) =>
+    bordered &&
+    css`
+      border: 2px solid ${color};
+    `}
+`;
+
+export const Label = styled.label`
+  display: block;
+  font-size: ${({ size }) => size}px;
+  margin-bottom: 8px;
+  color: ${({ color }) => color};
+`;
+
+export const Icon = styled(FaAngleDown)`
+  position: absolute;
+  top: 70%;
+  right: 10px;
+  transform: translateY(-50%);
+  font-size: ${({ size }) => size}px;
+  color: ${({ color }) => color};
+  cursor: pointer;
+`;

package/src/components/sideBar/sideMenu/index.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  SideMenuContainer,
+  NavigationItemContainer,
+  IconContainer,
+  TextContainer,
+  NotificationCount,
+  LogoutButtonContainer,
+  NavigationContainer,
+} from "./styles";
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import { CiLogout } from "react-icons/ci";
+import UserCard from "../userCard";
+import cx from "classnames";
+
+const SideMenu = ({ user, routes, userType, onLogout, isOpen, setIsOpen }) => {
+  // const [isOpen, setIsOpen] = useState(false);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const filteredRoutes = routes.find(
+    (route) => route.userType === userType
+  )?.routes;
+
+  const renderNavigationItem = (route, index) => {
+    const { icon, text, notifications, path } = route;
+    const active = window.location.pathname === route.path;
+    console.log(active);
+
+    return (
+      <NavigationItemContainer
+        to={route.path}
+        key={index}
+        className={cx(`${route.text}`, ({ isActive, isPending }) => {
+          isActive ? "active" : "";
+        })}
+        minimal={isOpen}
+      >
+        <IconContainer active={active}>{icon}</IconContainer>
+
+        <TextContainer minimal={isOpen}>{text}</TextContainer>
+
+        {notifications && (
+          <NotificationCount minimal={isOpen}>
+            <div className="text">{notifications}</div>
+          </NotificationCount>
+        )}
+      </NavigationItemContainer>
+    );
+  };
+
+  return (
+    <SideMenuContainer isOpen={isOpen}>
+      <UserCard user={user} isOpen={isOpen} />
+
+      <NavigationContainer>
+        {filteredRoutes && filteredRoutes.map(renderNavigationItem)}
+      </NavigationContainer>
+
+      <LogoutButtonContainer onClick={onLogout}>
+        <IconContainer>{/* <CiLogout /> */}</IconContainer>
+        {/* <TextContainer minimal={isOpen}>Log out</TextContainer> */}
+      </LogoutButtonContainer>
+      <div className="toggle" onClick={onToggle}>
+        {isOpen ? <IoIosArrowBack /> : <IoIosArrowForward />}
+      </div>
+    </SideMenuContainer>
+  );
+};
+
+SideMenu.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    handle: PropTypes.string.isRequired,
+    avatar: PropTypes.string.isRequired,
+  }).isRequired,
+  routes: PropTypes.arrayOf(
+    PropTypes.shape({
+      userType: PropTypes.string.isRequired,
+      routes: PropTypes.arrayOf(
+        PropTypes.shape({
+          path: PropTypes.string.isRequired,
+          icon: PropTypes.element.isRequired,
+          text: PropTypes.string.isRequired,
+          notifications: PropTypes.number,
+        })
+      ).isRequired,
+    })
+  ).isRequired,
+  onLogout: PropTypes.func.isRequired,
+};
+
+export default SideMenu;

package/src/components/sideBar/sideMenu/styles/index.jsx

@@ -0,0 +1,135 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+
+export const SideMenuContainer = styled.div`
+  position: relative;
+
+  width: ${({ isOpen }) => (isOpen ? "239px" : "48px")};
+  height: 80vh;
+  display: flex;
+  flex-direction: column; 
+
+  background-color: #00c2c2;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  padding: 30px 0;
+  transition: width 0.2s ease-in-out;
+  z-index: 100;
+  border-radius: 30px;
+  margin-left: 77px;
+
+  .toggle {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    border-radius: 4px;
+    background: #fff;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 115px;
+    right: -13px;
+    color: #fdcf04;
+  }
+`;
+
+export const NavigationContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 20px;
+`;
+export const NavigationItemContainer = styled(NavLink)`
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  position: relative;
+  padding: ${({ minimal }) => (minimal ? "12px 16px" : "12px 12px")};
+  color: ${({ active }) =>
+    active ? "rgb(255, 255, 255)" : "rgba(255, 255, 255, 0.625)"};
+  &:hover {
+    color: #ffffff;
+    background-color: #31cdcd;
+  }
+  &.active {
+    background-color: rgba(0, 153, 153, 0.5);
+    // border-left: 5px solid #febf10;
+    border-radius: 10px 0 0px 10px;
+    color: #ffffff;
+    &::before {
+      content: "";
+      height: 110%;
+      width: 5px;
+      border-radius: 0 10px 10px 0;
+      position: absolute;
+      top: -5%;
+      left: 0;
+      display: block;
+      background: #febf10;
+    }
+  }
+`;
+
+export const IconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 25px;
+`;
+
+export const TextContainer = styled.div`
+  display: ${({ minimal }) => (minimal ? "flex" : "none")};
+  align-items: center;
+  font-size: 16px;
+`;
+
+export const NotificationCount = styled.div`
+  background-color: #009999;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  margin-left: 2px;
+
+  ${({ minimal }) =>
+    minimal
+      ? null
+      : `
+    position: absolute;
+    bottom: 11px;
+    right: 14px;
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+    .text {
+        display: none;
+    }
+  `};
+`;
+
+export const LogoutButtonContainer = styled.div`
+  margin-top: auto;
+  display: flex;
+  gap: 10px;
+  cursor: pointer;
+  color: rgba(253, 253, 253, 0.595);
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+export const LogoutIcon = styled.img`
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+`;
+
+export const LogoutText = styled.div`
+  font-weight: bold;
+`;

package/src/components/sideBar/userCard/index.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  UserCardContainer,
+  Avatar,
+  UserName,
+  Handle,
+  UserDetail,
+} from "./styles";
+
+const UserCard = ({ user, isOpen }) => {
+  return (
+    <UserCardContainer isOpen={isOpen}>
+      <Avatar src={user.avatar} isOpen={isOpen} />
+      <UserDetail isOpen={isOpen}>
+        <UserName>{user.name}</UserName>
+        <Handle>{user.handle}</Handle>
+      </UserDetail>
+    </UserCardContainer>
+  );
+};
+
+UserCard.propTypes = {
+  user: PropTypes.shape({
+    avatar: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    handle: PropTypes.string.isRequired,
+  }).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};
+
+export default UserCard;

package/src/components/sideBar/userCard/styles/index.jsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+
+export const UserCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: ${({ isOpen }) => (isOpen ? "25px" : "80px")};
+`;
+export const UserDetail = styled.div`
+  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
+  flex-direction: column;
+  gap: 5px;
+  align-items: center;
+
+`;
+
+export const Avatar = styled.img`
+  width: 50px;
+  width: ${({ isOpen }) => (isOpen ? "47px" : "28px")};
+  height: ${({ isOpen }) => (isOpen ? "47px" : "28px")};
+  border-radius: 50%;
+`;
+
+export const UserName = styled.div`
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.881);
+  font-size: 12px ;
+`;
+
+export const Handle = styled.div`
+  color: rgba(255, 255, 255, 0.69);
+  font-size: 15px;
+`;
+

package/src/components/sideNav/index.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Icon, NavItem, NavItems, NavLinkStyled, NavWrapper, IconContainer } from "./styles";
+import { CiLogout } from "react-icons/ci";
+import { HiOutlineLogout } from "react-icons/hi"
+
+
+const SideBar = ({ routes }) => {
+  return (
+    <NavWrapper>
+      <NavItems>
+        {routes.map((route) => (
+          <NavItem key={route.path}>
+            <NavLinkStyled to={route.path} activeClassName="active">
+              <Icon>{route.icon}</Icon>
+              <span className="text">{route.label}</span>
+            </NavLinkStyled>
+          </NavItem>
+        ))}
+      </NavItems>
+      <IconContainer>
+          <HiOutlineLogout/>
+          <p>Sign Out</p>
+        </IconContainer>
+    </NavWrapper>
+  );
+};
+
+export default SideBar;

package/src/components/sideNav/styles/index.jsx

@@ -0,0 +1,159 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+
+export const NavWrapper = styled.nav`
+  background-color: #ffffff;
+  width: 57px;
+  position: fixed;
+  /* top: 10%; */
+  left: 0;
+  overflow-x: hidden;
+  padding: 35px 0;
+  border-radius: 0 30px 30px 0;
+  z-index: 1;
+  overflow: hidden;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const NavItems = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const NavItem = styled.div`
+  text-align: center;
+`;
+
+export const NavLinkStyled = styled(NavLink)`
+  color: rgba(95, 95, 95, 0.479);
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  text-align: center;
+  transition: all 0.3s ease;
+
+  .text {
+    font-size: 9px;
+    color: #adb3b3;
+  }
+
+  &:hover {
+    // background-color: rgba(22, 254, 165, 0.266);
+    color: rgba(22, 254, 165, 0.956);
+    background: rgba(0, 194, 194, 0.1);
+  }
+
+  &.active {
+    background-color: rgba(0, 194, 194, 0.1);
+    color: #00c2c2;
+    position: relative;
+
+    &::before {
+      content: "";
+      height: 110%;
+      width: 5px;
+      border-radius: 0 10px 10px 0;
+      position: absolute;
+      top: -5%;
+      left: 0;
+      display: block;
+      background: rgba(58, 194, 194, 1);
+    }
+
+    span {
+      color: #00c2c2;
+    }
+
+    svg {
+      path {
+        stroke: #00c2c2;
+      }
+    }
+  }
+`;
+
+export const Icon = styled.span`
+  margin: 0;
+  color: #adb3b3;
+  margin-bottom: 0px;
+  font-size: 16px;
+
+  // &:hover {
+  //   // background-color: rgba(22, 254, 165, 0.266);
+  //   color: #00C2C2;
+  //   background: rgba(0, 194, 194, 0.1);
+
+  // }
+
+  // &.active {
+  //   background-color: rgba(0, 194, 194, 0.1);
+  //   color: #3AC2C2;
+  //   position: relative;
+
+  //   &::before {
+  //     content: "";
+  //     height: 110%;
+  //     width: 5px;
+  //     border-radius: 0 10px 10px 0;
+  //     position: absolute;
+  //     top: -5%;
+  //     left: 0;
+  //     display: block;
+  //     background: rgba(22, 254, 165, 0.956);
+  //   }
+  // }
+`;
+
+export const IconContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 100px;
+  font-size: 20px;
+  padding: 10px;
+  cursor: pointer;
+
+  svg {
+    color: #adb3b3;
+    transform: rotate(180deg);
+    font-size: 18px;
+    margin-bottom: -8px;
+  }
+
+  p {
+    font-size: 9px;
+    color: #adb3b3;
+    margin-top: 10px;
+  }
+
+  &:hover {
+    // background-color: rgba(22, 254, 165, 0.266);
+    color: rgba(22, 254, 165, 0.956);
+    background: rgba(0, 194, 194, 0.1);
+  }
+
+  &.active {
+    background-color: rgba(0, 194, 194, 0.1);
+    color: #3ac2c2;
+    position: relative;
+
+    &::before {
+      content: "";
+      height: 110%;
+      width: 5px;
+      border-radius: 0 10px 10px 0;
+      position: absolute;
+      top: -5%;
+      left: 0;
+      display: block;
+      background: rgba(22, 254, 165, 0.956);
+    }
+  }
+`;