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,7 +1,40 @@
-import React from 'react';
+/* eslint-disable */
 
-const Button = ({ title }: { title: string }) => (
-  <button type="button">{title}</button>
-);
+import React from "react";
+import "../../styles/Button.scss";
+
+interface ButtonProps {
+  children: React.ReactNode;
+  variant?: "primary" | "secondary" | "outline";
+  disabled?: boolean;
+  onClick?: () => void;
+  icon?: React.ReactNode;
+  iconPosition?: "start" | "end";
+}
+
+function Button({
+  children,
+  variant = "outline",
+  disabled = false,
+  onClick,
+  icon,
+  iconPosition = "start",
+}: ButtonProps) {
+  return (
+    <button
+      className={`button button--${variant} ${disabled ? "button--disabled" : ""}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {icon && iconPosition === "start" && (
+        <span className="button-icon">{icon}</span>
+      )}
+      <span className="button-text">{children}</span>
+      {icon && iconPosition === "end" && (
+        <span className="button-icon">{icon}</span>
+      )}
+    </button>
+  );
+}
 
 export default Button;

src/components/buttons/Button2.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import React from "react";
+
+const Button = ({ title }: { title: string }) => (
+  <button type="button">{title}</button>
+);
+
+export default 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;