Skip to content

Commit 227cf5c

Browse files
DevHanzaDevHanza
committed
Complete Basic UI for Project: E-Commerce Advanced Filter
1 parent 4e89dcf commit 227cf5c

File tree

16 files changed

+355
-7
lines changed

16 files changed

+355
-7
lines changed

‎12. E-Commerce Filter Advanced/src/App.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import React from "react";
22
import Navigation from "./Navigation/Nav";
33
import Products from "./Products/Products";
44
import Recommended from "./Recommended/Recommended";
5+
import Sidebar from "./Sidebar/Sidebar";
56

67
function App() {
78
return (
89
<div>
10+
<Sidebar />
911
<Navigation />
10-
<Products />
1112
<Recommended />
13+
<Products />
1214
</div>
1315
);
1416
}

‎12. E-Commerce Filter Advanced/src/Navigation/Nav.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
nav {
2+
display: flex;
3+
border-bottom: 2px solid #f3f3f3;
4+
justify-content: space-around;
5+
align-items: center;
6+
padding: 20px;
7+
z-index: 999;
8+
margin-left: 2rem;
9+
}
10+
11+
input {
12+
padding: 12px 20px;
13+
border: none;
14+
background: #f7f6f6;
15+
outline: none;
16+
margin-right: 20px;
17+
border-radius: 5px;
18+
position: relative;
19+
width: 14rem;
20+
}
21+
22+
.nav-icons {
23+
width: 1.5rem;
24+
height: 1.5rem;
25+
margin-left: 2rem;
26+
color: #494949;
27+
}

‎12. E-Commerce Filter Advanced/src/Navigation/Nav.jsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,32 @@
11
import "./Nav.css";
2+
import { FiHeart } from "react-icons/fi";
3+
import { AiOutlineShoppingCart, AiOutlineUserAdd } from "react-icons/ai";
24

35
function Navigation() {
4-
return <div>Navigation</div>;
6+
return (
7+
<nav>
8+
<div className="nav-container">
9+
<input
10+
type="text"
11+
className="search-input"
12+
placeholder="Enter your search shoes.."
13+
/>
14+
</div>
15+
<div className="profile-container">
16+
<a href="#">
17+
<FiHeart className="nav-icons" />
18+
</a>
19+
20+
<a href="#">
21+
<AiOutlineShoppingCart className="nav-icons" />
22+
</a>
23+
24+
<a href="#">
25+
<AiOutlineUserAdd className="nav-icons" />
26+
</a>
27+
</div>
28+
</nav>
29+
);
530
}
631

732
export default Navigation;

‎12. E-Commerce Filter Advanced/src/Products/Products.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.card-container {
2+
display: flex;
3+
flex-wrap: wrap;
4+
margin-left: 20rem;
5+
margin-top: 2rem;
6+
z-index: -2;
7+
}
8+
9+
.card {
10+
margin: 20px;
11+
border: 2px solid #ededed;
12+
padding: 20px;
13+
cursor: pointer;
14+
}
15+
16+
.card-img {
17+
width: 13rem;
18+
margin-bottom: 1rem;
19+
}
20+
21+
.card-title {
22+
margin-bottom: 1rem;
23+
}
24+
25+
.card-reviews {
26+
margin-bottom: 1rem;
27+
display: flex;
28+
}
29+
30+
.ratings-start {
31+
color: #d5ab55;
32+
}
33+
34+
.total-reviews {
35+
font-size: 0.9rem;
36+
margin-left: 10px;
37+
}
38+
39+
.card-price {
40+
display: flex;
41+
justify-content: space-around;
42+
align-items: center;
43+
}
44+
45+
.bag-icon {
46+
color: #535353;
47+
}

‎12. E-Commerce Filter Advanced/src/Products/Products.jsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,41 @@
11
import "./Products.css";
2+
import { AiFillStar } from "react-icons/ai";
3+
import { BsFillBagHeartFill } from "react-icons/bs";
24

35
function Products() {
4-
return <div>Products</div>;
6+
return (
7+
<>
8+
<div className="card-container">
9+
<div className="card">
10+
<img
11+
className="card-img"
12+
src="https://m.media-amazon.com/images/I/6125yAfsJKL._AC_UX575_.jpg"
13+
alt="Shoe"
14+
/>
15+
<div className="card-details">
16+
<h3 className="card-title">Shoe</h3>
17+
<section className="card-reviews">
18+
<AiFillStar className="ratings-start" />
19+
<AiFillStar className="ratings-start" />
20+
<AiFillStar className="ratings-start" />
21+
<AiFillStar className="ratings-start" />
22+
23+
<span className="total-reviews">4</span>
24+
</section>
25+
<section className="card-price">
26+
<div className="price">
27+
<del>$300</del>
28+
</div>
29+
30+
<div className="bag">
31+
<BsFillBagHeartFill className="bag-icon" />
32+
</div>
33+
</section>
34+
</div>
35+
</div>
36+
</div>
37+
</>
38+
);
539
}
640

741
export default Products;

‎12. E-Commerce Filter Advanced/src/Recommended/Recommended.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.recommended-flex {
2+
display: flex;
3+
margin-left: 20rem;
4+
}
5+
6+
.recommended-title {
7+
margin-left: 20rem;
8+
margin-bottom: 20px;
9+
margin-top: 20px;
10+
font-size: 20px;
11+
}

‎12. E-Commerce Filter Advanced/src/Recommended/Recommended.jsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,20 @@ import React from "react";
22
import "./Recommended.css";
33

44
function Recommended() {
5-
return <div>Recommended</div>;
5+
return (
6+
<>
7+
<div>
8+
<h2 className="recommended-title">Recommended</h2>
9+
<div className="recommended-flex">
10+
<button className="btns">All Products</button>
11+
<button className="btns">Nike</button>
12+
<button className="btns">Adidas</button>
13+
<button className="btns">Puma</button>
14+
<button className="btns">Vans</button>
15+
</div>
16+
</div>
17+
</>
18+
);
619
}
720

821
export default Recommended;

‎12. E-Commerce Filter Advanced/src/Sidebar/Category/Category.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.sidebar-title {
2+
font-size: 22px;
3+
font-weight: normal;
4+
margin-bottom: 20px;
5+
}
6+
7+
.sidebar-items {
8+
margin-top: 20px;
9+
}
10+
11+
.sidebar-label-container {
12+
display: block;
13+
position: relative;
14+
padding-left: 35px;
15+
margin-bottom: 12px;
16+
cursor: pointer;
17+
-webkit-user-select: none;
18+
-moz-user-select: none;
19+
-ms-user-select: none;
20+
user-select: none;
21+
}
22+
23+
.sidebar-label-container input {
24+
position: absolute;
25+
opacity: 0;
26+
cursor: pointer;
27+
}
28+
29+
.checkmark {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
height: 20px;
34+
width: 20px;
35+
background-color: #eee;
36+
border-radius: 50%;
37+
}
38+
39+
.all {
40+
background: linear-gradient(blue, crimson);
41+
}
42+
43+
.sidebar-label-container:hover input ~ .checkmark {
44+
background-color: #ccc;
45+
}
46+
47+
.sidebar-label-container input:checked ~ .checkmark {
48+
background-color: #2196f3;
49+
}
50+
51+
.checkmark:after {
52+
content: "";
53+
position: absolute;
54+
display: none;
55+
}
56+
57+
.sidebar-label-container input:checked ~ .checkmark:after {
58+
display: block;
59+
}
60+
61+
.sidebar-label-container .checkmark:after {
62+
top: 6.4px;
63+
left: 6.4px;
64+
width: 7px;
65+
height: 7px;
66+
border-radius: 50%;
67+
background: white;
68+
}
69+
70+
.line {
71+
margin-top: 3rem;
72+
border-color: #f7f7f7;
73+
}

‎12. E-Commerce Filter Advanced/src/Sidebar/Category/Category.jsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
import "./Category.css";
22

33
function Category() {
4-
return <div>Category</div>;
4+
return (
5+
<div>
6+
<h2 className="sidebar-title">Category</h2>
7+
<div>
8+
<label className="sidebar-label-container">
9+
<input type="radio" name="test" id="" />
10+
<span className="checkmark"></span>All
11+
</label>
12+
</div>
13+
</div>
14+
);
515
}
616

717
export default Category;

‎12. E-Commerce Filter Advanced/src/Sidebar/Colors/Colors.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.color-title {
2+
margin-top: 2rem;
3+
}

0 commit comments

Comments
 (0)