Skip to content

Commit 7c4fb91

Browse files
ndahimana154Fabrice-Dush
ndahimana154
authored and
Fabrice-Dush
committed
[Delivers #187584859] Setup sample sass styles
1 parent 1538634 commit 7c4fb91

38 files changed

+1534
-60
lines changed

‎package-lock.json

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

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"html-webpack-plugin": "^5.6.0",
1515
"react": "^18.3.1",
1616
"react-dom": "^18.3.1",
17+
"react-icons": "^5.2.1",
1718
"react-redux": "^9.1.2",
1819
"sass": "^1.77.6",
1920
"save-dev": "0.0.1-security"
@@ -36,6 +37,7 @@
3637
"@storybook/react-webpack5": "^8.1.10",
3738
"@storybook/test": "^8.1.10",
3839
"@types/fork-ts-checker-webpack-plugin": "^0.4.5",
40+
"@types/mini-css-extract-plugin": "^2.5.1",
3941
"@types/react": "^18.3.3",
4042
"@types/react-dom": "^18.3.0",
4143
"@types/webpack-dev-server": "^4.7.2",

‎public/More Than.png

300 Bytes
Loading

‎public/facebook.png

1.38 KB
Loading

‎public/instagram.webp

246 KB
Binary file not shown.

‎public/left-bottom.png

26.7 KB
Loading

‎public/left-top.png

24.1 KB
Loading

‎public/middle.png

95.2 KB
Loading

‎public/right-bottom.png

21.2 KB
Loading

‎public/right-top.png

22 KB
Loading

‎src/App.tsx

+17-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
1-
import React from 'react';
2-
import LandingPage from './pages/LandingPage';
1+
/* eslint-disable */
2+
3+
import React from "react";
4+
import LandingPage from "./pages/LandingPage";
5+
import "./styles/style.scss";
6+
import Header from "./components/header/Header";
7+
import Footer from "./components/footer/Footer";
8+
import Categories from "./components/categories/Categories";
9+
import Home from "./pages/Home";
10+
import Sidebar from "./components/siderbar/Sidebar";
311

412
const App: React.FC = () => (
5-
<div>
13+
<>
14+
<Sidebar />
15+
<Header />
16+
<Categories />
617
<LandingPage />
7-
</div>
18+
<Footer />
19+
<Home />
20+
</>
821
);
922

1023
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+
const Button: React.FC<ButtonProps> = ({
16+
children,
17+
variant = "outline",
18+
disabled = false,
19+
onClick,
20+
icon,
21+
iconPosition = "start",
22+
}) => {
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/categories/Categories.tsx

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

‎src/components/footer/Footer.tsx

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* eslint-disable */
2+
3+
import React from "react";
4+
import "../../styles/_footer.scss";
5+
6+
function Footer() {
7+
return (
8+
<footer className="footer">
9+
<div className="footer__box footer__sell">
10+
<p className="footer__title">Sell With Ninjas</p>
11+
<ul className="footer__link__container">
12+
<li>
13+
<a href="#" className="footer__link">
14+
1. Join us
15+
</a>
16+
</li>
17+
</ul>
18+
</div>
19+
<div className="footer__box footer__guides">
20+
<p className="footer__title">Shopping guides</p>
21+
<ul className="footer__link__container">
22+
<li>
23+
<a href="#" className="footer__link">
24+
1. How to register
25+
</a>
26+
</li>
27+
<li>
28+
<a href="#" className="footer__link">
29+
2. How to place an order
30+
</a>
31+
</li>
32+
<li>
33+
<a href="#" className="footer__link">
34+
3. How to pay
35+
</a>
36+
</li>
37+
</ul>
38+
</div>
39+
<div className="footer__box footer__help">
40+
<p className="footer__title">Help center</p>
41+
<ul className="footer__link__container">
42+
<li>
43+
<a href="#" className="footer__link">
44+
1. Frequently asked questions
45+
</a>
46+
</li>
47+
<li>
48+
<a href="#" className="footer__link">
49+
2. Live chat
50+
</a>
51+
</li>
52+
</ul>
53+
</div>
54+
<div className="footer__box footer__contact">
55+
<p className="footer__title">Contact us</p>
56+
<p className="footer__text">
57+
Address: Kigali, Rwanda, Norsken building Room 14 Second Floor
58+
</p>
59+
<p className="footer__text">Phone: +250782345678</p>
60+
<p className="footer__text">Email: [email protected]</p>
61+
</div>
62+
<div className="footer__box footer__connect">
63+
<p className="footer__title">Stay connected</p>
64+
<ul className="footer__link__container footer__link__container-row">
65+
<li>
66+
<a
67+
href="https://instagram.com"
68+
target="_blank"
69+
className="footer__link"
70+
>
71+
<img
72+
src="instagram.webp"
73+
alt="Instagram logo"
74+
className="footer__img"
75+
/>
76+
</a>
77+
</li>
78+
<li>
79+
<a
80+
href="https://facebook.com"
81+
target="_blank"
82+
className="footer__link"
83+
>
84+
<img
85+
src="facebook.png"
86+
alt="Facebook logo"
87+
className="footer__img"
88+
/>
89+
</a>
90+
</li>
91+
</ul>
92+
</div>
93+
<p className="footer__copyright">
94+
&copy; E-commerce Ninjas {new Date().getFullYear()}. All rights
95+
reserved.
96+
</p>
97+
</footer>
98+
);
99+
}
100+
export default Footer;

0 commit comments

Comments
 (0)