Skip to content

Commit c97b700

Browse files
Aime-PatrickAime-Patrick
committed
Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe into ft-user-signup-187584865
2 parents dc9e5e0 + 1f38c2a commit c97b700

39 files changed

+4751
-3297
lines changed

‎package-lock.json

+4,003-3,227
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/images/email.png renamed to ‎public/assets/images/email.png

File renamed without changes.

‎public/images/failed.png renamed to ‎public/assets/images/failed.png

File renamed without changes.

‎public/assets/images/left-bottom.png

26.7 KB
Loading

‎public/assets/images/left-top.png

24.1 KB
Loading

‎public/images/login-icon.png renamed to ‎public/assets/images/login-icon.png

File renamed without changes.

‎public/images/logo.png renamed to ‎public/assets/images/logo.png

File renamed without changes.

‎public/images/new-message.png renamed to ‎public/assets/images/new-message.png

File renamed without changes.

‎public/images/not-found.png renamed to ‎public/assets/images/not-found.png

File renamed without changes.

‎public/assets/images/right-bottom.png

21.2 KB
Loading

‎public/assets/images/right-top.png

22 KB
Loading

‎public/images/sign-up.png renamed to ‎public/assets/images/sign-up.png

File renamed without changes.

‎public/assets/middle.png

95.2 KB
Loading

‎public/assets/shoe1.jpeg

6.91 KB
Loading

‎public/assets/shoe2.jpeg

8.79 KB
Loading

‎public/assets/shoe3.jpeg

5.76 KB
Loading

‎public/assets/shoe4.jpeg

6.57 KB
Loading

‎src/App.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import './styles/Colors.scss';
2+
@import './styles/Sample.scss';
23
@import './styles/style.scss';
34
@import './styles/signup.scss';
45
@import './styles/LandingPage.scss';
@@ -10,5 +11,6 @@
1011
@import './styles/Input.scss';
1112
@import './styles/SearchInput.scss';
1213
@import './styles/SellerHeader.scss';
13-
@import './styles/SideBar.scss';
14+
@import './styles/Sidebar.scss';
1415
@import './styles/Header.scss';
16+
@import "./styles/Product.scss";

‎src/components/categories/Categories.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/* eslint-disable */
2-
32
import React from "react";
4-
import "../../styles/Categories.scss";
5-
3+
import leftButton from '../../../public/assets/left-bottom.png';
4+
import middle from '../../../public/assets/middle.png';
5+
import rightButton from '../../../public/assets/right-bottom.png';
6+
import rightTop from '../../../public/assets/right-top.png';
67
function Categories() {
78
return (
89
<div className="categories__container">
@@ -20,7 +21,7 @@ function Categories() {
2021
</div>
2122
<div className="categories__box categories__box__2">
2223
<img
23-
src="left-bottom.png"
24+
src={leftButton}
2425
alt="Product image"
2526
className="categories__img"
2627
/>
@@ -31,7 +32,7 @@ function Categories() {
3132
</div>
3233
<div className="categories__box categories__box__3">
3334
<img
34-
src="middle.png"
35+
src={middle}
3536
alt="Product image"
3637
className="categories__img"
3738
/>
@@ -51,7 +52,7 @@ function Categories() {
5152
</div>
5253
<div className="categories__box categories__box__4">
5354
<img
54-
src="right-top.png"
55+
src={rightTop}
5556
alt="Product image"
5657
className="categories__img"
5758
/>
@@ -64,7 +65,7 @@ function Categories() {
6465
</div>
6566
<div className="categories__box categories__box__5">
6667
<img
67-
src="right-bottom.png"
68+
src={rightButton}
6869
alt="Product image"
6970
className="categories__img"
7071
/>

‎src/components/layout/Footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -180,4 +180,4 @@ function Footer() {
180180
</footer>
181181
);
182182
}
183-
export default Footer;
183+
export default Footer;

‎src/components/layout/Header.tsx

+34-21
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { IoCartOutline } from "react-icons/io5";
99
import { IoLogOutSharp } from "react-icons/io5";
1010
import { FaUserClock } from "react-icons/fa6";
1111
import { FaChevronDown } from "react-icons/fa";
12-
import Logo from "../../../public/images/logo.png";
12+
import { NavLink } from "react-router-dom";
13+
import Logo from "../../../public/assets/images/logo.png";
1314

1415
import SearchInput from "../inputs/SearchInput";
1516

@@ -108,28 +109,28 @@ function Header() {
108109
<div className="order__dropdown">
109110
<ul className="order__list">
110111
<li>
111-
<a href="#" className="order__link">
112+
<NavLink to="/my-orders" className="order__link">
112113
<FaBuildingCircleCheck className="order__icon" />
113114
<span className="order__text">My Orders</span>
114-
</a>
115+
</NavLink>
115116
</li>
116117
<li>
117-
<a href="#" className="order__link">
118+
<NavLink to="/wishlist" className="order__link">
118119
<FaBuildingCircleCheck className="order__icon" />
119120
<span className="order__text">WishList</span>
120-
</a>
121+
</NavLink>
121122
</li>
122123
<li>
123-
<a href="#" className="order__link">
124+
<NavLink to="/profile-settings" className="order__link">
124125
<FaUserClock className="order__icon" />
125126
<span className="order__text">Profile Settings</span>
126-
</a>
127+
</NavLink>
127128
</li>
128129
<li>
129-
<a href="#" className="order__link">
130+
<NavLink to="/login" className="order__link">
130131
<IoLogOutSharp className="order__icon" />
131132
<span className="order__text">Login</span>
132-
</a>
133+
</NavLink>
133134
</li>
134135
</ul>
135136
</div>
@@ -140,23 +141,35 @@ function Header() {
140141
<div className="header__nav">
141142
<nav>
142143
<ul>
143-
<li>
144-
<a href="#">Home</a>
144+
<li className="nav__item">
145+
<NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')}>
146+
Home
147+
</NavLink>
145148
</li>
146-
<li>
147-
<a href="#">Shops</a>
149+
<li className="nav__item">
150+
<NavLink to="/shops" className={({ isActive }) => (isActive ? 'active' : '')}>
151+
Shops
152+
</NavLink>
148153
</li>
149-
<li>
150-
<a href="#">Products</a>
154+
<li className="nav__item">
155+
<NavLink to="/products" className={({ isActive }) => (isActive ? 'active' : '')}>
156+
Products
157+
</NavLink>
151158
</li>
152-
<li>
153-
<a href="#">Services</a>
159+
<li className="nav__item">
160+
<NavLink to="/services" className={({ isActive }) => (isActive ? 'active' : '')}>
161+
Services
162+
</NavLink>
154163
</li>
155-
<li>
156-
<a href="#">Contact-Us</a>
164+
<li className="nav__item">
165+
<NavLink to="/contact-us" className={({ isActive }) => (isActive ? 'active' : '')}>
166+
Contact-Us
167+
</NavLink>
157168
</li>
158-
<li>
159-
<a href="#">About-us</a>
169+
<li className="nav__item">
170+
<NavLink to="/about-us" className={({ isActive }) => (isActive ? 'active' : '')}>
171+
About-us
172+
</NavLink>
160173
</li>
161174
</ul>
162175
</nav>

‎src/components/layout/Sample.tsx

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/* eslint-disable */
2+
import React, { useState, useEffect, useRef } from 'react';
3+
import { TfiHeadphoneAlt } from "react-icons/tfi";
4+
import { VscWorkspaceTrusted } from "react-icons/vsc";
5+
import { LiaShippingFastSolid } from "react-icons/lia";
6+
import { FaHandHoldingUsd } from "react-icons/fa";
7+
import { GoDotFill } from "react-icons/go";
8+
import { FaChevronCircleLeft, FaChevronCircleRight } from "react-icons/fa";
9+
import leftTop from "../../../public/assets/images/left-top.png";
10+
import rightTop from "../../../public/assets/images/right-top.png";
11+
import leftBottom from "../../../public/assets/images/left-bottom.png";
12+
import rightBottom from "../../../public/assets/images/right-bottom.png";
13+
const images = [
14+
'/assets/middle.png',
15+
'/assets/shoe2.jpeg',
16+
'/assets/shoe3.jpeg'
17+
];
18+
19+
const Sample: React.FC = () => {
20+
const [currentIndex, setCurrentIndex] = useState(0);
21+
const intervalRef = useRef<NodeJS.Timeout | null>(null);
22+
23+
const handleLeftClick = () => {
24+
setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1));
25+
};
26+
27+
const handleRightClick = () => {
28+
setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
29+
};
30+
31+
const startImageChangeInterval = () => {
32+
intervalRef.current = setInterval(() => {
33+
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
34+
}, 5000);
35+
};
36+
37+
useEffect(() => {
38+
startImageChangeInterval();
39+
return () => {
40+
if (intervalRef.current) {
41+
clearInterval(intervalRef.current);
42+
}
43+
};
44+
}, []);
45+
46+
useEffect(() => {
47+
if (intervalRef.current) {
48+
clearInterval(intervalRef.current);
49+
startImageChangeInterval();
50+
}
51+
}, [currentIndex]);
52+
53+
return (
54+
<div>
55+
<div className="sampleImages1">
56+
<div className="sample1">
57+
<div className="menShoe">
58+
<img src={leftTop} alt="" />
59+
<div className="text-container">
60+
<p>Men's Shoes</p>
61+
<button>View &gt;</button>
62+
</div>
63+
</div>
64+
<div className="phones">
65+
<img src={leftBottom} alt="" />
66+
<div className="text-container">
67+
<p>Phones</p>
68+
<button>View &gt;</button>
69+
</div>
70+
</div>
71+
</div>
72+
<div className="sample2" style={{ backgroundImage: `url(${images[currentIndex]})` }}>
73+
<div className="arrow left" onClick={handleLeftClick}>
74+
<FaChevronCircleLeft className="icon-arrow" />
75+
</div>
76+
<div className="arrow right" onClick={handleRightClick}>
77+
<FaChevronCircleRight className="icon-arrow" />
78+
</div>
79+
<div className="dots">
80+
{images.map((_, index) => (
81+
<GoDotFill
82+
key={index}
83+
className="icon-dots"
84+
style={{ color: currentIndex === index ? '#ff6d18' : '#fff' }}
85+
/>
86+
))}
87+
</div>
88+
</div>
89+
<div className="sample3">
90+
<div className="womenShoe">
91+
<img src={rightTop} alt="" />
92+
<div className="text-container">
93+
<p>Women's Shoes</p>
94+
<button>View &gt;</button>
95+
</div>
96+
</div>
97+
<div className="accessories">
98+
<img src={rightBottom} alt="" />
99+
<div className="text-container">
100+
<p>Accessories</p>
101+
<button>View &gt;</button>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
<div className="trust-container">
107+
<div className="trust">
108+
<TfiHeadphoneAlt className="icon" />
109+
<div className="name">
110+
<h2>Responsive</h2>
111+
<p>Customer service available 24/7</p>
112+
</div>
113+
</div>
114+
<div className="trust">
115+
<VscWorkspaceTrusted className="icon" />
116+
<div className="name">
117+
<h2>Secure</h2>
118+
<p>Certified marketplace since 2024</p>
119+
</div>
120+
</div>
121+
<div className="trust">
122+
<LiaShippingFastSolid className="icon" />
123+
<div className="name">
124+
<h2>Shipping</h2>
125+
<p>Free, fast, and reliable worldwide</p>
126+
</div>
127+
</div>
128+
<div className="trust">
129+
<FaHandHoldingUsd className="icon" />
130+
<div className="name">
131+
<h2>Transparent</h2>
132+
<p>Free return policy</p>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
);
138+
};
139+
140+
export default Sample;

‎src/components/product/Product.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* eslint-disable */
2+
import React, { useState, useRef } from 'react';
3+
import { CiHeart } from "react-icons/ci";
4+
import { PiShoppingCartThin } from "react-icons/pi";
5+
interface ProductProps {
6+
images: string[];
7+
name: string;
8+
price: string;
9+
stock: number;
10+
description: string;
11+
discount: number;
12+
}
13+
14+
const Product: React.FC<ProductProps> = ({ images, name, price, stock, description, discount }) => {
15+
const [currentImageIndex, setCurrentImageIndex] = useState(0);
16+
const intervalRef = useRef<NodeJS.Timeout | null>(null);
17+
18+
const handleMouseEnter = () => {
19+
intervalRef.current = setInterval(() => {
20+
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
21+
}, 2000);
22+
};
23+
24+
const handleMouseLeave = () => {
25+
if (intervalRef.current) {
26+
clearInterval(intervalRef.current);
27+
}
28+
setCurrentImageIndex(0);
29+
};
30+
31+
const truncateDescription = (desc: string, length: number) => {
32+
return desc.length > length ? `${desc.substring(0, length)}...` : desc;
33+
};
34+
35+
return (
36+
<div className="product">
37+
<div
38+
className="product-image-container"
39+
onMouseEnter={handleMouseEnter}
40+
onMouseLeave={handleMouseLeave}
41+
>
42+
<span className="discount-badge">{discount}%</span>
43+
<img src={images[currentImageIndex]} alt="Product" className="product-image" />
44+
</div>
45+
<div className="product-info">
46+
<div className="product-add">
47+
<div className="icon-container"><PiShoppingCartThin className="icon" /></div>
48+
<div className="icon-container"><CiHeart className="icon" /></div>
49+
</div>
50+
<div className="product-name">{name}</div>
51+
<div className="product-details">
52+
<p className="product-price">{price}</p>
53+
<p className="product-stock"><span className="stock">Stock:</span>{stock}</p>
54+
</div>
55+
<p className="product-description">{truncateDescription(description, 20)}</p>
56+
</div>
57+
</div>
58+
);
59+
};
60+
61+
export default Product;

‎src/pages/EmailVerifying.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { useEffect } from 'react'
33
import { Meta } from '../components/Meta'
44
import { useNavigate } from 'react-router-dom';
5-
import newMessage from "../../public/images/new-message.png"
5+
import newMessage from "../../public/assets/images/new-message.png"
66
import { useAppSelector } from '../store/store'
77
export const EmailVerifying = () => {
88
const navigate = useNavigate();

0 commit comments

Comments
 (0)