From b6335e7dddc15abc9aac1b3a73c2d21fa1261bb0 Mon Sep 17 00:00:00 2001
From: Riddhi <thakkarriddhi1610@gmail.com>
Date: Fri, 26 Jul 2024 17:44:45 +0530
Subject: [PATCH 1/2] Added the dtyling to dropdown

---
 Frontend/src/Pages/CustomDropdown.css | 56 +++++++++++++++++++++++
 Frontend/src/Pages/CustomDropdown.jsx | 35 +++++++++++++++
 Frontend/src/Pages/Product.jsx        | 65 +++++++++++++++++----------
 3 files changed, 132 insertions(+), 24 deletions(-)
 create mode 100644 Frontend/src/Pages/CustomDropdown.css
 create mode 100644 Frontend/src/Pages/CustomDropdown.jsx

diff --git a/Frontend/src/Pages/CustomDropdown.css b/Frontend/src/Pages/CustomDropdown.css
new file mode 100644
index 0000000..8f597ee
--- /dev/null
+++ b/Frontend/src/Pages/CustomDropdown.css
@@ -0,0 +1,56 @@
+.custom-dropdown {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 5px;
+  background-color: rgba(217, 148, 249, 0.519);
+}
+
+.custom-dropdown-header {
+  display: flex;
+  width: 400px;
+  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  margin: 0px;
+  padding: 10px;
+  
+  background-color: rgb(248, 235, 255);
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.custom-dropdown-selected {
+  flex-grow: 1;
+}
+
+.custom-dropdown-arrow {
+  margin-left: 10px;
+}
+
+.custom-dropdown-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background-color: rgba(228, 152, 245, 0.563);
+  border: 1px solid #ccc;
+  backdrop-filter: blur(30px);
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-top: 5px;
+}
+
+.custom-dropdown-option {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(50, 0, 56, 0.227);
+}
+
+.custom-dropdown-option:hover {
+  background-color: var(--color-hover);
+  color: #fff;
+}
diff --git a/Frontend/src/Pages/CustomDropdown.jsx b/Frontend/src/Pages/CustomDropdown.jsx
new file mode 100644
index 0000000..5d3ef04
--- /dev/null
+++ b/Frontend/src/Pages/CustomDropdown.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import './CustomDropdown.css';
+
+const CustomDropdown = ({ className, options, onChange, value, isOpen, setIsOpen }) => {
+  const handleOptionClick = (optionValue) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={`custom-dropdown ${className}`}>
+      <div className="custom-dropdown-header" onClick={() => setIsOpen(!isOpen)}>
+        <div className="custom-dropdown-selected">
+          {options.find((option) => option.value === value)?.label || 'Select'}
+        </div>
+        <div className="custom-dropdown-arrow">&#9662;</div> 
+      </div>
+      {isOpen && (
+        <div className="custom-dropdown-options">
+          {options.map((option) => (
+            <div
+              key={option.value}
+              className="custom-dropdown-option"
+              onClick={() => handleOptionClick(option.value)}
+            >
+              {option.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomDropdown;
diff --git a/Frontend/src/Pages/Product.jsx b/Frontend/src/Pages/Product.jsx
index feb5c05..0d91c72 100644
--- a/Frontend/src/Pages/Product.jsx
+++ b/Frontend/src/Pages/Product.jsx
@@ -4,6 +4,7 @@ import "../CSS/Product.css";
 import Loader from "../Components/Loader";
 import ProductDetail from "../Components/ProductDetail";
 import toast from "react-hot-toast";
+import CustomDropdown from "./CustomDropdown";
 
 const Product = () => {
   const [loading, setLoading] = useState(true);
@@ -16,6 +17,8 @@ const Product = () => {
   const [selectedCategory, setSelectedCategory] = useState("");
   const [sortByDate, setSortByDate] = useState("");
 
+  const [openDropdown, setOpenDropdown] = useState(null);
+
   useEffect(() => {
     axios
       .get("https://ecommerce-backend-0wr7.onrender.com/ecommerce/product")
@@ -113,36 +116,50 @@ const Product = () => {
           onChange={(e) => setSearchText(e.target.value)}
         />
         <div className="filters">
-          <select
+          <CustomDropdown
             className="filterSelect"
-            onChange={(e) => setSortOrder(e.target.value)}
+            options={[
+              { value: "", label: "Sort by Price" },
+              { value: "price-asc", label: "Price: Low to High" },
+              { value: "price-desc", label: "Price: High to Low" },
+            ]}
+            onChange={(value) => setSortOrder(value)}
             value={sortOrder}
-          >
-            <option value="">Sort by Price</option>
-            <option value="price-asc">Price: Low to High</option>
-            <option value="price-desc">Price: High to Low</option>
-          </select>
-          <select
+            isOpen={openDropdown === "sortOrder"}
+            setIsOpen={(isOpen) =>
+              setOpenDropdown(isOpen ? "sortOrder" : null)
+            }
+          />
+          <CustomDropdown
             className="filterSelect"
-            onChange={(e) => setSelectedCategory(e.target.value)}
+            options={[
+              { value: "", label: "Filter by Category" },
+              ...categories.map((category) => ({
+                value: category,
+                label: category,
+              })),
+            ]}
+            onChange={(value) => setSelectedCategory(value)}
             value={selectedCategory}
-          >
-            <option value="">Filter by Category</option>
-            {categories.map((category) => (
-              <option key={category} value={category}>
-                {category}
-              </option>
-            ))}
-          </select>
-          <select
+            isOpen={openDropdown === "selectedCategory"}
+            setIsOpen={(isOpen) =>
+              setOpenDropdown(isOpen ? "selectedCategory" : null)
+            }
+          />
+          <CustomDropdown
             className="filterSelect"
-            onChange={(e) => setSortByDate(e.target.value)}
+            options={[
+              { value: "", label: "Sort by Publish Date" },
+              { value: "date-asc", label: "Date: Oldest to Newest" },
+              { value: "date-desc", label: "Date: Newest to Oldest" },
+            ]}
+            onChange={(value) => setSortByDate(value)}
             value={sortByDate}
-          >
-            <option value="">Sort by Publish Date</option>
-            <option value="date-asc">Date: Oldest to Newest</option>
-            <option value="date-desc">Date: Newest to Oldest</option>
-          </select>
+            isOpen={openDropdown === "sortByDate"}
+            setIsOpen={(isOpen) =>
+              setOpenDropdown(isOpen ? "sortByDate" : null)
+            }
+          />
         </div>
         {loading ? (
           <Loader />

From 1337e731fbe2a8818e29a482f5718e00bfef84e7 Mon Sep 17 00:00:00 2001
From: Riddhi Thakkar <135015856+Riddhi162@users.noreply.github.com>
Date: Fri, 26 Jul 2024 17:52:02 +0530
Subject: [PATCH 2/2] Update CustomDropdown.css

---
 Frontend/src/Pages/CustomDropdown.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Frontend/src/Pages/CustomDropdown.css b/Frontend/src/Pages/CustomDropdown.css
index 8f597ee..6054046 100644
--- a/Frontend/src/Pages/CustomDropdown.css
+++ b/Frontend/src/Pages/CustomDropdown.css
@@ -51,6 +51,6 @@
 }
 
 .custom-dropdown-option:hover {
-  background-color: var(--color-hover);
+  background-color: purple;
   color: #fff;
 }