Skip to content

Commit 6426745

Browse files
MANISHIMWESaltonFabrice-DushAime-Patrick
authored
Users should be able to search (#13)
* Reusable Components * [Derivers#18758479] ft-user-search * [Derivers#18758479] ft-user-search * user search product UI * user search products * user-search-products * resolving bugs --------- Co-authored-by: Fabrice-Dush <[email protected]> Co-authored-by: Aime-Patrick <[email protected]>
1 parent 144a4e9 commit 6426745

File tree

16 files changed

+705
-119
lines changed

16 files changed

+705
-119
lines changed

‎public/assets/images/noResult.png

931 KB
Loading

‎src/App.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,6 @@
2020
@import "./assets/styles/SingleProduct.scss";
2121
@import "./assets/styles/ImageSlider.scss";
2222
@import "./assets/styles/Queries.scss";
23-
@import "./assets/styles/Notifications.scss";
23+
@import "./assets/styles/Notifications.scss";;
24+
@import "./assets/styles/Search.scss";
25+
@import "./assets/styles/CustomSelect.scss";

‎src/assets/styles/CustomSelect.scss

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.custom-select-wrapper {
2+
position: relative;
3+
width: 20rem;
4+
.custom-select {
5+
cursor: pointer;
6+
}
7+
.select-selected {
8+
display: flex;
9+
justify-content: space-between;
10+
align-items: center;
11+
padding: 10px;
12+
border: 1px solid #ccc;
13+
border-radius: 4px;
14+
border: 1px solid rgba(255, 109, 24, 0.49);
15+
background-color: #fff;
16+
}
17+
.dropdown-icon {
18+
font-size: 24px;
19+
}
20+
.select-items {
21+
position: absolute;
22+
width: 100%;
23+
max-height: 10rem;
24+
overflow-y: auto;
25+
border: 1px solid #ccc;
26+
border-top: none;
27+
background-color: #fff;
28+
z-index: 1;
29+
}
30+
.select-option {
31+
padding: 10px;
32+
cursor: pointer;
33+
}
34+
.select-option:hover {
35+
background-color: #f1f1f1;
36+
}
37+
}

‎src/assets/styles/Search.scss

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.wrappers {
2+
background-color: $container-color;
3+
4+
.upper-side {
5+
display: flex;
6+
align-items: center;
7+
font-size: 1.5rem;
8+
padding: 2rem 5rem;
9+
border-bottom: 2px solid rgba(119, 119, 119, 0.49);
10+
11+
.product-name {
12+
font-size: 2rem;
13+
font-weight: 700;
14+
color: $text-color;
15+
margin-right: 2rem;
16+
}
17+
18+
.filter-option {
19+
display: flex;
20+
gap: 10rem;
21+
22+
.selection-part {
23+
display: flex;
24+
align-items: center;
25+
gap: 2rem;
26+
font-size: 2rem;
27+
font-weight: 700;
28+
color: $text-color;
29+
30+
}
31+
32+
.search-Span-price {
33+
font-size: 2rem;
34+
font-weight: 700;
35+
color: $text-color;
36+
margin-right: 2rem;
37+
}
38+
39+
.dropdown-select {
40+
41+
gap: 2rem;
42+
font-size: 2rem;
43+
font-weight: 700;
44+
color: $text-color;
45+
border: 1px solid rgba(255, 109, 24, 0.49);
46+
border-radius: 4px;
47+
padding: 0.5rem 2rem;
48+
font-size: 15px;
49+
cursor: pointer;
50+
}
51+
}
52+
53+
.discount-display {
54+
font-size: 2rem;
55+
display: flex;
56+
align-items: center;
57+
}
58+
}
59+
60+
.product-main {
61+
display: flex;
62+
63+
.product-list {
64+
display: flex;
65+
flex-wrap: wrap;
66+
margin: 3rem 3rem;
67+
margin-left: 5rem;
68+
gap: 3rem;
69+
}
70+
71+
.loader-spinner {
72+
display: flex;
73+
justify-content: center;
74+
align-items: center;
75+
margin-left: 70rem;
76+
margin-top: 20rem;
77+
}
78+
79+
.noResult {
80+
margin: 0 auto;
81+
display: flex;
82+
flex-direction: column;
83+
margin-bottom: 1rem;
84+
85+
img {
86+
width: auto;
87+
height: 400px;
88+
}
89+
}
90+
}
91+
}

‎src/assets/styles/SearchInput.scss

+77-44
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,89 @@
1-
@import "./Colors";
2-
3-
.search-container {
4-
display: flex;
5-
align-items: center;
6-
border: 0.1rem solid $primary-color-dark;
7-
border-radius: 10rem;
8-
overflow: hidden;
1+
2+
.main-search {
3+
gap:2rem;
94
position: relative;
105

11-
.search-icon {
12-
font-size: 2.4rem;
13-
margin-left: -2rem;
6+
.search-container {
147
display: flex;
15-
color: $primary-color;
168
align-items: center;
17-
justify-content: center;
18-
position: relative;
19-
cursor: pointer;
20-
z-index: 1;
21-
}
9+
border: 0.1rem solid $primary-color-dark;
10+
border-radius: 10rem;
11+
overflow: hidden;
2212

23-
input {
24-
border: none;
25-
outline: none;
26-
font-family: inherit;
27-
font-size: 1.6rem;
28-
flex: 1;
29-
background-color: transparent;
30-
31-
&::placeholder {
32-
color: $secondary-color;
13+
.search-icon {
14+
font-size: 2.4rem;
15+
padding-left:1rem;
16+
display: flex;
17+
color: $primary-color;
18+
align-items: center;
19+
justify-content: center;
20+
position: relative;
21+
cursor: pointer;
22+
z-index: 1;
3323
}
34-
}
3524

36-
.search-button {
37-
background-color: $primary-color;
38-
border: none;
39-
padding: 0.8rem 4.8rem;
40-
color: $white;
41-
font-size: 1.6rem;
42-
font-weight: 600;
43-
cursor: pointer;
44-
position: relative;
45-
z-index: 1;
46-
transition: all 0.2s ease-in;
47-
48-
&:hover {
49-
background-color: darken($primary-color, 10%);
25+
input {
26+
border: none;
27+
outline: none;
28+
font-family: inherit;
29+
font-size: 1.6rem;
30+
flex: 1;
31+
background-color: transparent;
32+
33+
&::placeholder {
34+
color: $secondary-color;
35+
}
5036
}
5137

52-
&:focus {
53-
outline: none;
38+
.search-button {
39+
background-color: $primary-color;
40+
border: none;
41+
padding: 0.8rem 4.8rem;
42+
color: $white;
43+
font-size: 1.6rem;
44+
font-weight: 600;
45+
cursor: pointer;
46+
position: relative;
47+
z-index: 1;
48+
transition: all 0.2s ease-in;
49+
50+
&:hover {
51+
background-color: darken($primary-color, 10%);
52+
}
53+
54+
&:focus {
55+
outline: none;
56+
}
57+
}
58+
}
59+
.search-result {
60+
position: absolute;
61+
width: 36.5rem;
62+
max-height: 28em;
63+
left: 0.5rem;
64+
z-index: 1000;
65+
margin-top: 0.1rem;
66+
padding: 1rem;
67+
font-size: 14px;
68+
font-weight: 500;
69+
background-color: $white;
70+
overflow-y: auto;
71+
text-decoration: none;
72+
.result {
73+
display: flex;
74+
flex-direction: column;
75+
padding: 13px;
76+
border: 1px solid none;
77+
margin-top: 1px;
78+
}
79+
.result:hover {
80+
background: rgb(242, 240, 240);
81+
padding: 15px;
82+
cursor: pointer;
5483
}
5584
}
85+
.link{
86+
text-decoration: none;
87+
color: black;
88+
}
5689
}

‎src/components/Dropdown/CustomSelect.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* eslint-disable */
2+
import React, { useState, useEffect, useRef } from 'react';
3+
import { RiArrowDropDownLine } from 'react-icons/ri';
4+
5+
interface Option {
6+
label: string;
7+
value: string;
8+
}
9+
10+
interface CustomSelectProps {
11+
options: Option[];
12+
onSelect: (selected: string) => void;
13+
value: string;
14+
}
15+
16+
const CustomSelect: React.FC<CustomSelectProps> = ({ options, onSelect, value }) => {
17+
const [selectedLabel, setSelectedLabel] = useState('Select an option');
18+
const [isOpen, setIsOpen] = useState(false);
19+
const wrapperRef = useRef<HTMLDivElement>(null);
20+
21+
useEffect(() => {
22+
const selectedOption = options.find(option => option.value === value);
23+
if (selectedOption) {
24+
setSelectedLabel(selectedOption.label);
25+
}
26+
}, [value, options]);
27+
28+
useEffect(() => {
29+
const handleClickOutside = (event: MouseEvent) => {
30+
if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
31+
setIsOpen(false);
32+
}
33+
};
34+
document.addEventListener('mousedown', handleClickOutside);
35+
return () => {
36+
document.removeEventListener('mousedown', handleClickOutside);
37+
};
38+
}, []);
39+
40+
const handleOptionClick = (option: Option) => {
41+
setSelectedLabel(option.label);
42+
setIsOpen(false);
43+
onSelect(option.value);
44+
};
45+
46+
return (
47+
<div className="custom-select-wrapper" ref={wrapperRef}>
48+
<div className="custom-select" onClick={() => setIsOpen(!isOpen)}>
49+
<div className="select-selected">
50+
{selectedLabel}
51+
<RiArrowDropDownLine className="dropdown-icon" />
52+
</div>
53+
{isOpen && (
54+
<div className="select-items">
55+
{options.map((option, index) => (
56+
<div
57+
key={index}
58+
className="select-option"
59+
onClick={() => handleOptionClick(option)}
60+
>
61+
{option.label}
62+
</div>
63+
))}
64+
</div>
65+
)}
66+
</div>
67+
</div>
68+
);
69+
};
70+
71+
export default CustomSelect;

‎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/inputs/Input.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable */
22

33
import React, { ReactNode } from "react";
4-
import "../../styles/Input.scss";
54

65
interface InputLabelProps extends React.InputHTMLAttributes<HTMLInputElement> {
76
label: string;

0 commit comments

Comments
 (0)