Reusable Components

package.json

@@ -16,6 +16,7 @@
     "mini-css-extract-plugin": "^2.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
     "sass": "^1.77.6",

src/App.tsx

@@ -1,12 +1,14 @@
-/* eslint-disable linebreak-style */
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import AppRouter from './router';
+/* eslint-disable*/
+import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import AppRouter from "./router";
+import "./styles/style.scss";
+import Sidebar from "./components/sidebar/Sidebar";
 
 const App: React.FC = () => (
   <Router>
     <AppRouter />
   </Router>
 );
 
-export default App;
+export default App;

src/components/buttons/Button.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+/* eslint-disable */
+
+import React from "react";
 
 const Button = ({ title }: { title: string }) => (
   <button type="button">{title}</button>

src/components/categories/Categories.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable */
+
+import React from "react";
+import "../../styles/Categories.scss";
+
+function Categories() {
+  return (
+    <div className="categories__container">
+      <div className="categories">
+        <div className="categories__box categories__box__1">
+          <img
+            src="left-top.png"
+            alt="Product image"
+            className="categories__img"
+          />
+          <div className="categories__content">
+            <p className="categories__text">Men's shoes</p>
+            <button className="categories__btn">View &gt;</button>
+          </div>
+        </div>
+        <div className="categories__box categories__box__2">
+          <img
+            src="left-bottom.png"
+            alt="Product image"
+            className="categories__img"
+          />
+          <div className="categories__content">
+            <p className="categories__text">Phones</p>
+            <button className="categories__btn">View &gt;</button>
+          </div>
+        </div>
+        <div className="categories__box categories__box__3">
+          <img
+            src="middle.png"
+            alt="Product image"
+            className="categories__img"
+          />
+          <div className="categories__controlls">
+            <button className="categories__controll categories__controll__left">
+              &lt;
+            </button>
+            <button className="categories__controll categories__controll__right">
+              &gt;
+            </button>
+          </div>
+          <div className="dots">
+            <div className="dot dot__active"></div>
+            <div className="dot"></div>
+            <div className="dot"></div>
+          </div>
+        </div>
+        <div className="categories__box categories__box__4">
+          <img
+            src="right-top.png"
+            alt="Product image"
+            className="categories__img"
+          />
+          <div className="categories__content categories__content__right">
+            <p className="categories__text">Women's shoes</p>
+            <button className="categories__btn categories__btn__orange">
+              View &gt;
+            </button>
+          </div>
+        </div>
+        <div className="categories__box categories__box__5">
+          <img
+            src="right-bottom.png"
+            alt="Product image"
+            className="categories__img"
+          />
+          <div className="categories__content categories__content__right">
+            <p className="categories__text ">Accessories</p>
+            <button className="categories__btn categories__btn__gray">
+              View &gt;
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Categories;

src/components/inputs/Input.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable */
+
+import React, { ReactNode } from "react";
+import "../../styles/Input.scss";
+
+interface InputLabelProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  type?: "text" | "date" | "password" | "select" | "textarea" | "search";
+  children?: ReactNode;
+}
+
+function InputLabel({
+  label,
+  type = "text",
+  children,
+  ...props
+}: InputLabelProps) {
+  return (
+    <div className="floating-label">
+      {type === "select" ? (
+        <select
+          className="floating-select"
+          {...(props as React.SelectHTMLAttributes<HTMLSelectElement>)}
+        >
+          <option value=""></option>
+          {children}
+        </select>
+      ) : type === "textarea" ? (
+        <textarea
+          className="floating-input floating-textarea"
+          {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+        ></textarea>
+      ) : (
+        <input className="floating-input" type={type} {...props} />
+      )}
+      <span className="input-highlight"></span>
+      <label>{label}</label>
+    </div>
+  );
+}
+
+function InputDefault(
+  props: React.JSX.IntrinsicAttributes &
+    React.ClassAttributes<HTMLInputElement> &
+    React.InputHTMLAttributes<HTMLInputElement>
+) {
+  return <input className="input-default" {...props} />;
+}
+
+function InputRounded(
+  props: React.JSX.IntrinsicAttributes &
+    React.ClassAttributes<HTMLInputElement> &
+    React.InputHTMLAttributes<HTMLInputElement>
+) {
+  return <input className="input-rounded" {...props} />;
+}
+
+export { InputLabel, InputDefault, InputRounded };

src/components/inputs/SearchInput.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable */
+
+import React from "react";
+import { FiSearch } from "react-icons/fi";
+import "../../styles/SearchInput.scss";
+
+interface SearchInputProps {
+  className?: string;
+  placeholder?: string;
+}
+
+function SearchInput({ className, placeholder }: SearchInputProps) {
+  return (
+    <form className={`search-container ${className}`}>
+      <div className="search-icon">
+        <FiSearch />
+      </div>
+      <input type="text" placeholder={placeholder} />
+      <button className="search-button">Search</button>
+    </form>
+  );
+}
+
+export default SearchInput;

src/components/layout/AdminHeader.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable */
+import React from "react";
+import { IoIosNotifications } from "react-icons/io";
+import { FaEnvelope } from "react-icons/fa";
+import "../../styles/AdminHeader.scss";
+
+function AdminHeader() {
+  return (
+    <header className="admin-header">
+      <div className="header__logo">
+        <img
+          src="logo.png"
+          alt="Ecommerce logo"
+          className="header__logo__img"
+        />
+        <p className="header__logo__text">
+          e-Commerce <span>Ninjas</span>
+        </p>
+      </div>
+      <div className="header__notification__box">
+        <IoIosNotifications className="header__notification__icon header__notification__icon__1" />
+        <span className="header__notification__number">10</span>
+      </div>
+      <div className="header__notification__box">
+        <FaEnvelope className="header__notification__icon" />
+        <span className="header__notification__number">30</span>
+      </div>
+      <div className="header__user__box">
+        <img src="person.jpg" alt="UI face" className="header__user__img" />
+        <p className="header__text">
+          Hi, <span className="header__user__name">Emmanuel</span>
+        </p>
+      </div>
+    </header>
+  );
+}
+
+export default AdminHeader;