Merge pull request #58 from GenerateNU/cc-17-filter-sidebar

Cc 17 filter sidebar
GenerateNU · Nov 14, 2023 · 110ee34 · 110ee34
2 parents ef14e67 + 9e6159c
commit 110ee34
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 52 deletions.
diff --git a/client/src/components/Filter.tsx b/client/src/components/Filter.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import FilterSection from "./FilterSection";
+
+const recipients = ["For Her", "For Him", "For Mom", "For Dad"];
+const interests = ["Sports", "Cooking", "Games"];
+const prices = ["Under $25", "Under $50", "Under $100", "Under $500"];
+const occasions = ["Birthday", "Anniversary", "Graduation"];
+
+type FilterProps = {
+  isOpen: boolean;
+  filterToggle: () => void;
+};
+
+const Filter: React.FC<FilterProps> = ({ isOpen, filterToggle }) => {
+  return (
+    <div>
+      {isOpen && (
+        <>
+          {/* Dark overlay */}
+          <div className="fixed top-0 left-0 w-full h-full bg-black opacity-50 z-10"></div>
+
+          {/* Filter modal */}
+          <div className="absolute top-0 right-0 mt-16 w-1/4 bg-white p-8 shadow-lg z-20 text-black overflow-y-auto max-h-screen">
+            <div className="flex justify-between">
+              <h2 className="mb-4 text-lg font-bold">Filter</h2>
+              <div className="cursor-pointer" onClick={filterToggle}>
+                x
+              </div>
+            </div>
+
+            {/* Filter sections */}
+            <FilterSection title="By Occasion" items={occasions} />
+            <FilterSection title="By Recipient" items={recipients} />
+            <FilterSection title="By Interest" items={interests} />
+            <FilterSection
+              title="By Price"
+              items={prices}
+              additional={
+                <div className="flex">
+                  <div className="w-32">
+                    <label className="w-24">
+                      Min price:
+                      <input className="w-full border" name="minPrice" />
+                    </label>
+                  </div>
+                  <div className="w-32">
+                    <label className="w-24">
+                      Max price:
+                      <input className="w-full border" name="maxPrice" />
+                    </label>
+                  </div>
+                </div>
+              }
+            />
+            <FilterSection title="Cait's Picks" items={[]} />
+            <button className="bg-gray-400 mt-6 px-4 py-2 h-10 text-white rounded-md float-right">
+              Apply filters
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Filter;
diff --git a/client/src/components/FilterSection.tsx b/client/src/components/FilterSection.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+
+type FilterSectionProps = {
+  title: string;
+  items: string[];
+  additional?: any;
+};
+
+const FilterSection: React.FC<FilterSectionProps> = ({
+  title,
+  items,
+  additional,
+}) => {
+  const [sectionOpen, setSectionOpen] = useState(false);
+
+  const toggle = () => {
+    setSectionOpen(!sectionOpen);
+  };
+  return (
+    <>
+      <hr className="h-px my-2 bg-gray-500 border-0" />
+      <div className="flex justify-between cursor-pointer" onClick={toggle}>
+        <h2 className="text-lg font-bold my-2">{title}</h2>
+        <div className="my-2" onClick={toggle}>
+          {items.length > 0 ? (sectionOpen ? "-" : "+") : null}
+        </div>
+      </div>
+      {sectionOpen &&
+        items.map((item) => (
+          <h2 key={item} className="mb-2">
+            {item}
+          </h2>
+        ))}
+      {sectionOpen && additional}
+    </>
+  );
+};
+
+export default FilterSection;
diff --git a/client/src/components/GiftSortNavBar.tsx b/client/src/components/GiftSortNavBar.tsx
@@ -1,8 +1,10 @@
 import { useState } from "react";
+import Filter from "./Filter";
 
 const GiftSortNavbar = () => {
   const [activeButton, setActiveButton] = useState("");
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [filterOpen, setFilterOpen] = useState(false);
   const [selectedFeature, setSelectedFeature] = useState("Featured");
 
   const handleButtonClick = (buttonName: any) => {
@@ -13,6 +15,10 @@ const GiftSortNavbar = () => {
     setDropdownOpen(!dropdownOpen);
   };
 
+  const handleFilterToggle = () => {
+    setFilterOpen(!filterOpen);
+  };
+
   const handleFeatureSelect = (feature: any) => {
     setSelectedFeature(feature);
     setDropdownOpen(false);
@@ -24,8 +30,8 @@ const GiftSortNavbar = () => {
 
   return (
     <div className="bg-gray-100 p-2">
-    <div className="flex" style={{ maxWidth: "1440px" }}>
-      <div className="flex space-x-2 "  style={{ marginRight: "680px" }}>
+      <div className="flex" style={{ maxWidth: "1440px" }}>
+        <div className="flex space-x-2 " style={{ marginRight: "680px" }}>
           <button
             className={`${buttonStyle} ${
               activeButton === "Shop" ? activeButtonStyle : ""
@@ -35,60 +41,62 @@ const GiftSortNavbar = () => {
             Shop All Gifts
           </button>
         </div>
-
-          <div className="ml-auto flex items-center"> 
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth="1.5"
-              stroke="black"
-              className="w-4 h-4"
+
+        <div className="ml-auto flex items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="black"
+            className="w-4 h-4"
+            onClick={handleFilterToggle}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+            />
+          </svg>
+          <div className="relative">
+            <button
+              className={`${buttonStyle} ${
+                activeButton === "SignUp" ? activeButtonStyle : ""
+              }`}
+              onClick={handleDropdownToggle}
             >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
-              />
-            </svg>
-            <div className="relative">
-              <button
-                className={`${buttonStyle} ${
-                  activeButton === "SignUp" ? activeButtonStyle : ""
-                }`}
-                onClick={handleDropdownToggle}
-              >
-                Sort By: {selectedFeature}
-              </button>
-              {dropdownOpen && (
-                <div className="absolute mt-2 right-0 border border-gray-300 rounded-md bg-gray-100 text-black text-sm shadow-lg z-10"> 
-                  <ul>
-                    <li
-                      onClick={() => handleFeatureSelect("Featured")}
-                      className="cursor-pointer px-4 py-2 hover:bg-gray-300"
-                    >
-                      Featured
-                    </li>
-                    <li
-                      onClick={() => handleFeatureSelect("Price")}
-                      className="cursor-pointer px-4 py-2 hover:bg-gray-300"
-                    >
-                      Price
-                    </li>
-                    <li
-                      onClick={() => handleFeatureSelect("Occasion")}
-                      className="cursor-pointer px-4 py-2 hover:bg-gray-300"
-                    >
-                      Occassion
-                    </li>
-                    {/* Add more options here */}
-                  </ul>
-                </div>
-              )}
-            </div>
+              Sort By: {selectedFeature}
+            </button>
+            {dropdownOpen && (
+              <div className="absolute mt-2 right-0 border border-gray-300 rounded-md bg-gray-100 text-black text-sm shadow-lg z-10">
+                <ul>
+                  <li
+                    onClick={() => handleFeatureSelect("Featured")}
+                    className="cursor-pointer px-4 py-2 hover:bg-gray-300"
+                  >
+                    Featured
+                  </li>
+                  <li
+                    onClick={() => handleFeatureSelect("Price")}
+                    className="cursor-pointer px-4 py-2 hover:bg-gray-300"
+                  >
+                    Price
+                  </li>
+                  <li
+                    onClick={() => handleFeatureSelect("Occasion")}
+                    className="cursor-pointer px-4 py-2 hover:bg-gray-300"
+                  >
+                    Occasion
+                  </li>
+                  {/* Add more options here */}
+                </ul>
+              </div>
+            )}
           </div>
+          <Filter isOpen={filterOpen} filterToggle={handleFilterToggle} />
         </div>
       </div>
+    </div>
   );
 };