l-min-components 0.2.0

package/src/components/header/index.jsx

@@ -0,0 +1,134 @@
+import { useState, useEffect, useRef } from "react";
+import ReactFlagsSelect from "react-flags-select";
+import logo from "./assets/images/logo.png";
+import { BookIcon } from "./assets/svg/book";
+import { PeopleIcon } from "./assets/svg/people";
+import { MessageIcon } from "./assets/svg/message";
+import { SettingIcon } from "./assets/svg/setting";
+import { SearchIcon } from "./assets/svg/search";
+import { NotificationIcon } from "./assets/svg/notification";
+import { ArrowDownIcon } from "./assets/svg/arrow-down";
+import AccountDropdown from "./account-dropdown";
+import avatar from "./assets/images/avatar.png";
+import {
+  Navbar,
+  NavGroup,
+  Nav,
+  SearchInputGroup,
+  SearchInput,
+  UserProfile,
+  CountryFlagGroup,
+} from "./index.styled";
+
+/**
+ * @param {{
+ *  type: string,
+ *  text: string,
+ *  onClick: Function,
+ *  style: CSSProperties,
+ * }} props - properties of Header Component
+ *
+ */
+const HeaderComponent = (props) => {
+  const [selected, setSelected] = useState("ES");
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchResultOpen, setSearchResultOpen] = useState(false);
+
+  console.log(selected);
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <Navbar>
+      <img src={logo} alt="Learngual logo" />
+      <Nav>
+        <li>
+          <a href="#" className="active">
+            <BookIcon /> Learning
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <PeopleIcon /> Friends
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <MessageIcon /> Messages
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <SettingIcon /> Settings
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <NotificationIcon /> Notifications
+          </a>
+        </li>
+      </Nav>
+
+      <NavGroup>
+        <SearchInputGroup>
+          <SearchIcon />
+          <SearchInput
+            type={props.inputType}
+            value={props.value}
+            id={props.inputId}
+            placeholder={props.placeholder}
+            style={props.inputStyles}
+            onChange={props.onChange}
+            onFocus={() => setSearchResultOpen(true)}
+            onBlur={() => setSearchResultOpen(false)}
+          />
+
+          {searchResultOpen && (
+            <div className="search-result-wrapper">
+              <p>
+                Website <span>UIUX </span> Design
+              </p>
+            </div>
+          )}
+        </SearchInputGroup>
+
+        <CountryFlagGroup>
+          <ReactFlagsSelect
+            selected={selected}
+            onSelect={(code) => setSelected(code)}
+            showOptionLabel={true}
+          />
+          <ArrowDownIcon />
+        </CountryFlagGroup>
+
+        <UserProfile onClick={() => setIsOpen(true)}>
+          <div className="user-img-container">
+            <img src={props.avatar} alt="profile" />
+          </div>
+          <div className="user-info-container">
+            <h5>{props.accounts}</h5>
+            <h6>{props.accountType}</h6>
+          </div>
+          <ArrowDownIcon width={16} height={10} />
+        </UserProfile>
+      </NavGroup>
+
+      {isOpen && (
+        <AccountDropdown
+          avatar={avatar}
+          activeAccountName={"Michael Ohaga"}
+          activeAccountType={"Personal Account"}
+          accountName={"Jo Gulgowski"}
+          accountType={"Instructor Account"}
+          notificationCount={"5"}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+        />
+      )}
+    </Navbar>
+  );
+};
+
+export default HeaderComponent;

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

@@ -0,0 +1,486 @@
+import styled from "styled-components";
+
+/* styles for header component authenticated users */
+export const Navbar = styled.nav`
+  background-color: rgba(255, 255, 255, 1);
+  padding: 10px 10px 10px 20px;
+  display: flex;
+  font-family: "Nunito";
+  width: 100%;
+  align-items: center;
+  position: fixed;
+  z-index: 555;
+`;
+
+export const NavGroup = styled.div`
+  width: 40%;
+  display: flex;
+  justify-content: end;
+`;
+
+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;
+    font-size: 16px;
+    color: rgba(74, 77, 77, 1);
+
+    & svg {
+      margin-right: 12px;
+    }
+
+    &:hover {
+      color: rgba(0, 2, 2, 1);
+      & svg path {
+        stroke: rgba(0, 194, 194, 1);
+      }
+    }
+  }
+`;
+
+export const SearchInputGroup = styled.div`
+  background-color: transparent;
+  border-radius: 60px;
+  border: 1px solid rgba(173, 178, 178, 1);
+  transition: 0.5s;
+  display: flex;
+  align-items: center;
+  padding: 9px;
+  margin: 0 15px;
+  position: relative;
+  &:focus {
+    width: 130px;
+  }
+  &:active {
+    border: 1px solid rgba(0, 2, 2, 1);
+  }
+  &::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;
+  &:active {
+    border: none;
+  }
+  &::placeholder {
+    color: rgba(173, 178, 178, 1);
+  }
+`;
+
+export const UserProfile = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  & h5 {
+    margin: 0;
+    color: rgba(49, 51, 51, 1);
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  & h6 {
+    color: rgba(148, 153, 153, 1);
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  & > div {
+    margin-left: 10px;
+  }
+
+  & svg {
+    margin-left: 20px;
+  }
+`;
+
+export const CountryFlagGroup = styled.div`
+  background-color: transparent;
+  border-radius: 60px;
+  transition: 0.5s;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 70px;
+  margin: 0 10px;
+
+  & > svg {
+    position: absolute;
+    right: 7px;
+    width: 16px;
+    height: 10px;
+    top: 18px;
+  }
+
+  & .ReactFlagsSelect-module_flagsSelect__2pfa2 {
+    width: 100%;
+    padding-bottom: 0;
+  }
+
+  & .ReactFlagsSelect-module_selectBtn__19wW7 {
+    border: 1px solid rgba(173, 178, 178, 1);
+    border-radius: 20px;
+    padding: 5px 10px 5px 0;
+  }
+
+  & .ReactFlagsSelect-module_selectBtn__19wW7:after {
+    display: none;
+  }
+
+  &
+    .ReactFlagsSelect-module_selectValue__152eS
+    .ReactFlagsSelect-module_label__27pw9 {
+    display: none;
+  }
+
+  /* & .ReactFlagsSelect-module_label__27pw9,
+  .ReactFlagsSelect-module_secondaryLabel__37t1D {
+    display: none !important;
+  } */
+
+  & .ReactFlagsSelect-module_selectFlag__2q5gC {
+    svg {
+      border-radius: 50%;
+      width: 26px;
+    }
+  }
+`;
+
+/* styles for header account dropdown */
+
+export const AccountDropdownLayout = styled.div`
+  background-color: #ffffff;
+  font-family: "Nunito";
+  width: 286px;
+  min-height: 300px;
+  box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.08);
+  border-radius: 30px;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 65px;
+  right: 0;
+  z-index: 5;
+`;
+
+export const AccountDropdownHeader = styled.div`
+  padding: 24px;
+  display: flex;
+  font-family: "Nunito";
+  align-items: center;
+  border-radius: 30px 30px 0 0;
+  width: 100%;
+  border-bottom: 1px solid rgba(51, 51, 51, 0.15);
+
+  & h1 {
+    font-family: "Poppins";
+    font-weight: 600;
+    font-size: 16px;
+    color: rgba(51, 51, 51, 1);
+    margin-left: 16px;
+  }
+
+  & h2 {
+    font-family: "Poppins";
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(51, 51, 51, 0.7);
+    margin-left: 16px;
+  }
+
+  & svg {
+    margin-left: auto;
+  }
+`;
+
+export const AccountDropdownBody = styled.div`
+  background-color: #ffffff;
+  width: 100%;
+
+  & h3 {
+    font-family: "Nunito";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(74, 77, 77, 1);
+    padding: 4px 10px 0;
+  }
+
+  & h1 {
+    font-family: "Nunito";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #000000;
+
+    &:hover {
+      color: rgba(0, 194, 194, 1);
+    }
+  }
+
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+
+  & .avatar-container {
+    width: 30px;
+    height: 30px;
+  }
+
+  & .account-info {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 10px 20px;
+    &:hover {
+      background-color: rgba(239, 248, 248, 1);
+
+      h1 {
+        color: rgba(0, 194, 194, 1);
+      }
+    }
+  }
+
+  & .account-details {
+    margin-left: 10px;
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+
+    & span {
+      width: 20px;
+      height: 20px;
+      background-color: rgba(176, 220, 220, 0.2);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      color: rgba(0, 194, 194, 1);
+      font-size: 12px;
+      font-weight: 700;
+    }
+  }
+`;
+
+export const AccountDropdownFooter = styled.div`
+  background-color: #ffffff;
+  padding: 17px 26px;
+  display: flex;
+  font-family: "Nunito";
+  width: 100%;
+  align-items: center;
+  border-radius: 0 0 30px 30px;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid rgba(51, 51, 51, 0.15);
+  margin-top: auto;
+
+  & button {
+    display: flex;
+    border: none;
+    font-family: "Nunito";
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    align-items: center;
+    text-align: center;
+    color: rgba(254, 191, 16, 1);
+    background-color: transparent;
+    cursor: pointer;
+
+    & svg {
+      margin-right: 17px;
+    }
+  }
+`;
+
+/* styles for header component unauthenticated users*/
+export const Navbar2 = styled.nav`
+  background-color: #ffffff;
+  padding: 24px 100px;
+  display: flex;
+  font-family: "Nunito";
+  width: 100%;
+  align-items: center;
+  position: fixed;
+`;
+
+export const Nav2 = styled.ul`
+  display: flex;
+  list-style: none;
+  align-items: center;
+  margin: 0 50px;
+  padding: 0 5px;
+  width: 57%;
+  z-index: 555;
+  & li {
+    display: flex;
+    align-items: center;
+    margin: 0 20px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    /* &:hover {
+      border-bottom: 2px solid red;
+    } */
+  }
+
+  & a.active {
+    color: rgba(74, 77, 77, 1);
+    font-weight: 700;
+  }
+
+  & a {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: rgba(148, 153, 153, 1);
+    font-weight: 700;
+
+    &:hover {
+      color: rgba(74, 77, 77, 1);
+    }
+  }
+
+  & a:after {
+    display: block;
+    content: "";
+    border-bottom: solid 5px #000;
+    transform: scaleX(1);
+    transition: transform 300ms ease-in-out;
+  }
+
+  & a:hover:after {
+    transform: scaleX(1);
+  }
+`;
+
+export const NavGroup2 = styled.div`
+  width: 50%;
+  display: flex;
+  justify-content: end;
+`;
+
+export const CountryFlagGroup2 = styled.div`
+  /* background-color: rgba(249, 84, 84, 1); */
+  border-radius: 8px;
+  transition: 0.5s;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 70px;
+  margin: 0 70px 0 0;
+
+  & > svg {
+    position: absolute;
+    right: 10px;
+    width: 12px;
+    height: 7px;
+    top: 17px;
+  }
+
+  & .ReactFlagsSelect-module_flagsSelect__2pfa2 {
+    width: 100%;
+    padding-bottom: 0;
+  }
+
+  & .ReactFlagsSelect-module_selectBtn__19wW7 {
+    border: none;
+    border-radius: 10px;
+    padding: 3px 8px 3px 0;
+    background-color: rgba(249, 84, 84, 0.1);
+  }
+
+  & .ReactFlagsSelect-module_selectBtn__19wW7:after {
+    display: none;
+  }
+
+  &
+    .ReactFlagsSelect-module_selectValue__152eS
+    .ReactFlagsSelect-module_label__27pw9 {
+    display: none;
+  }
+
+  /* & .ReactFlagsSelect-module_label__27pw9,
+  .ReactFlagsSelect-module_secondaryLabel__37t1D {
+    display: none !important;
+  } */
+
+  & .ReactFlagsSelect-module_selectFlag__2q5gC {
+    svg {
+      border-radius: 50%;
+      width: 26px;
+    }
+  }
+`;

package/src/components/header/login-header.jsx

@@ -0,0 +1,71 @@
+import { useState, useEffect, useRef } from "react";
+import ReactFlagsSelect from "react-flags-select";
+import logo from "./assets/images/logo.png";
+import {
+  Navbar2,
+  NavGroup2,
+  Nav2,
+  CountryFlagGroup2,
+} from "./index.styled";
+import { ArrowDownIcon } from "./assets/svg/arrow-down";
+import ButtonComponent from "../button";
+
+
+/**
+ * @param {{
+ *  type: string,
+ *  text: string,
+ *  onClick: Function,
+ *  style: CSSProperties,
+ * }} props - properties of Header Component
+ *
+ */
+const HeaderComponentTwo = (props) => {
+  const [selected, setSelected] = useState("ES");
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchResultOpen, setSearchResultOpen] = useState(false);
+
+  console.log(selected);
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <Navbar2>
+      <img src={logo} alt="Learngual logo" />
+      <Nav2>
+        <li>
+          <a href="#" className="active">
+            What we do
+          </a>
+        </li>
+        <li>
+          <a href="#">Demo</a>
+        </li>
+        <li>
+          <a href="#">Pricing</a>
+        </li>
+        <li>
+          <a href="#">Contact</a>
+        </li>
+      </Nav2>
+
+      <NavGroup2>
+        <CountryFlagGroup2>
+          <ReactFlagsSelect
+            selected={selected}
+            onSelect={(code) => setSelected(code)}
+            showOptionLabel={false}
+          />
+          <ArrowDownIcon />
+        </CountryFlagGroup2>
+
+        <ButtonComponent type="secondary" text="Log in"/>
+      </NavGroup2>
+    </Navbar2>
+    
+  );
+};
+
+export default HeaderComponentTwo;