Skip to content

Commit aec6755

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

31 files changed

+1948
-112
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",

‎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

+37-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,40 @@
1-
import React from 'react';
1+
/* eslint-disable */
22

3-
const Button = ({ title }: { title: string }) => (
4-
<button type="button">{title}</button>
5-
);
3+
import React from "react";
4+
import "../../styles/Button.scss";
5+
6+
interface ButtonProps {
7+
children: React.ReactNode;
8+
variant?: "primary" | "secondary" | "outline";
9+
disabled?: boolean;
10+
onClick?: () => void;
11+
icon?: React.ReactNode;
12+
iconPosition?: "start" | "end";
13+
}
14+
15+
function Button({
16+
children,
17+
variant = "outline",
18+
disabled = false,
19+
onClick,
20+
icon,
21+
iconPosition = "start",
22+
}: ButtonProps) {
23+
return (
24+
<button
25+
className={`button button--${variant} ${disabled ? "button--disabled" : ""}`}
26+
onClick={onClick}
27+
disabled={disabled}
28+
>
29+
{icon && iconPosition === "start" && (
30+
<span className="button-icon">{icon}</span>
31+
)}
32+
<span className="button-text">{children}</span>
33+
{icon && iconPosition === "end" && (
34+
<span className="button-icon">{icon}</span>
35+
)}
36+
</button>
37+
);
38+
}
639

740
export default Button;

‎src/components/buttons/Button2.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable */
2+
3+
import React from "react";
4+
5+
const Button = ({ title }: { title: string }) => (
6+
<button type="button">{title}</button>
7+
);
8+
9+
export default 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;

0 commit comments

Comments
 (0)