Skip to content

Commit 964df64

Browse files
Fabrice-DushFabrice-Dush
committed
Reusable Components
1 parent ff1539f commit 964df64

35 files changed

+2091
-108
lines changed

‎package-lock.json

+9-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"mini-css-extract-plugin": "^2.9.0",
1717
"react": "^18.3.1",
1818
"react-dom": "^18.3.1",
19+
"react-icons": "^5.2.1",
1920
"react-redux": "^9.1.2",
2021
"react-router-dom": "^6.24.0",
2122
"sass": "^1.77.6",

‎public/person.jpg

148 KB
Loading

‎src/App.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
/* eslint-disable linebreak-style */
2-
import React from 'react';
3-
import { BrowserRouter as Router } from 'react-router-dom';
4-
import AppRouter from './router';
1+
/* eslint-disable*/
2+
import React from "react";
3+
import { BrowserRouter as Router } from "react-router-dom";
4+
import AppRouter from "./router";
5+
import "./styles/style.scss";
6+
import Sidebar from "./components/sidebar/Sidebar";
57

68
const App: React.FC = () => (
79
<Router>
810
<AppRouter />
911
</Router>
1012
);
1113

12-
export default App;
14+
export default App;

‎src/components/buttons/Button.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import React from 'react';
1+
/* eslint-disable */
2+
3+
import React from "react";
24

35
const Button = ({ title }: { title: string }) => (
46
<button type="button">{title}</button>

‎src/components/categories/Categories.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* eslint-disable */
2+
3+
import React from "react";
4+
import "../../styles/Categories.scss";
5+
6+
function Categories() {
7+
return (
8+
<div className="categories__container">
9+
<div className="categories">
10+
<div className="categories__box categories__box__1">
11+
<img
12+
src="left-top.png"
13+
alt="Product image"
14+
className="categories__img"
15+
/>
16+
<div className="categories__content">
17+
<p className="categories__text">Men's shoes</p>
18+
<button className="categories__btn">View &gt;</button>
19+
</div>
20+
</div>
21+
<div className="categories__box categories__box__2">
22+
<img
23+
src="left-bottom.png"
24+
alt="Product image"
25+
className="categories__img"
26+
/>
27+
<div className="categories__content">
28+
<p className="categories__text">Phones</p>
29+
<button className="categories__btn">View &gt;</button>
30+
</div>
31+
</div>
32+
<div className="categories__box categories__box__3">
33+
<img
34+
src="middle.png"
35+
alt="Product image"
36+
className="categories__img"
37+
/>
38+
<div className="categories__controlls">
39+
<button className="categories__controll categories__controll__left">
40+
&lt;
41+
</button>
42+
<button className="categories__controll categories__controll__right">
43+
&gt;
44+
</button>
45+
</div>
46+
<div className="dots">
47+
<div className="dot dot__active"></div>
48+
<div className="dot"></div>
49+
<div className="dot"></div>
50+
</div>
51+
</div>
52+
<div className="categories__box categories__box__4">
53+
<img
54+
src="right-top.png"
55+
alt="Product image"
56+
className="categories__img"
57+
/>
58+
<div className="categories__content categories__content__right">
59+
<p className="categories__text">Women's shoes</p>
60+
<button className="categories__btn categories__btn__orange">
61+
View &gt;
62+
</button>
63+
</div>
64+
</div>
65+
<div className="categories__box categories__box__5">
66+
<img
67+
src="right-bottom.png"
68+
alt="Product image"
69+
className="categories__img"
70+
/>
71+
<div className="categories__content categories__content__right">
72+
<p className="categories__text ">Accessories</p>
73+
<button className="categories__btn categories__btn__gray">
74+
View &gt;
75+
</button>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
);
81+
}
82+
83+
export default Categories;

‎src/components/inputs/Input.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* eslint-disable */
2+
3+
import React, { ReactNode } from "react";
4+
import "../../styles/Input.scss";
5+
6+
interface InputLabelProps extends React.InputHTMLAttributes<HTMLInputElement> {
7+
label: string;
8+
type?: "text" | "date" | "password" | "select" | "textarea" | "search";
9+
children?: ReactNode;
10+
}
11+
12+
function InputLabel({
13+
label,
14+
type = "text",
15+
children,
16+
...props
17+
}: InputLabelProps) {
18+
return (
19+
<div className="floating-label">
20+
{type === "select" ? (
21+
<select
22+
className="floating-select"
23+
{...(props as React.SelectHTMLAttributes<HTMLSelectElement>)}
24+
>
25+
<option value=""></option>
26+
{children}
27+
</select>
28+
) : type === "textarea" ? (
29+
<textarea
30+
className="floating-input floating-textarea"
31+
{...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
32+
></textarea>
33+
) : (
34+
<input className="floating-input" type={type} {...props} />
35+
)}
36+
<span className="input-highlight"></span>
37+
<label>{label}</label>
38+
</div>
39+
);
40+
}
41+
42+
function InputDefault(
43+
props: React.JSX.IntrinsicAttributes &
44+
React.ClassAttributes<HTMLInputElement> &
45+
React.InputHTMLAttributes<HTMLInputElement>
46+
) {
47+
return <input className="input-default" {...props} />;
48+
}
49+
50+
function InputRounded(
51+
props: React.JSX.IntrinsicAttributes &
52+
React.ClassAttributes<HTMLInputElement> &
53+
React.InputHTMLAttributes<HTMLInputElement>
54+
) {
55+
return <input className="input-rounded" {...props} />;
56+
}
57+
58+
export { InputLabel, InputDefault, InputRounded };

‎src/components/inputs/SearchInput.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* eslint-disable */
2+
3+
import React from "react";
4+
import { FiSearch } from "react-icons/fi";
5+
import "../../styles/SearchInput.scss";
6+
7+
interface SearchInputProps {
8+
className?: string;
9+
placeholder?: string;
10+
}
11+
12+
function SearchInput({ className, placeholder }: SearchInputProps) {
13+
return (
14+
<form className={`search-container ${className}`}>
15+
<div className="search-icon">
16+
<FiSearch />
17+
</div>
18+
<input type="text" placeholder={placeholder} />
19+
<button className="search-button">Search</button>
20+
</form>
21+
);
22+
}
23+
24+
export default SearchInput;

‎src/components/layout/AdminHeader.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* eslint-disable */
2+
import React from "react";
3+
import { IoIosNotifications } from "react-icons/io";
4+
import { FaEnvelope } from "react-icons/fa";
5+
import "../../styles/AdminHeader.scss";
6+
7+
function AdminHeader() {
8+
return (
9+
<header className="admin-header">
10+
<div className="header__logo">
11+
<img
12+
src="logo.png"
13+
alt="Ecommerce logo"
14+
className="header__logo__img"
15+
/>
16+
<p className="header__logo__text">
17+
e-Commerce <span>Ninjas</span>
18+
</p>
19+
</div>
20+
<div className="header__notification__box">
21+
<IoIosNotifications className="header__notification__icon header__notification__icon__1" />
22+
<span className="header__notification__number">10</span>
23+
</div>
24+
<div className="header__notification__box">
25+
<FaEnvelope className="header__notification__icon" />
26+
<span className="header__notification__number">30</span>
27+
</div>
28+
<div className="header__user__box">
29+
<img src="person.jpg" alt="UI face" className="header__user__img" />
30+
<p className="header__text">
31+
Hi, <span className="header__user__name">Emmanuel</span>
32+
</p>
33+
</div>
34+
</header>
35+
);
36+
}
37+
38+
export default AdminHeader;

0 commit comments

Comments
 (0)