adding min/max price inputs, styling changes

GenerateNU · Nov 8, 2023 · f699556 · f699556
1 parent f7059d5
commit f699556
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/client/src/components/Filter.tsx b/client/src/components/Filter.tsx
@@ -23,15 +23,39 @@ const Filter: React.FC<FilterProps> = ({ isOpen, filterToggle }) => {
           <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 onClick={filterToggle}>x</div>
+              <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} />
+            <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>
         </>
       )}

diff --git a/client/src/components/FilterSection.tsx b/client/src/components/FilterSection.tsx
@@ -3,9 +3,14 @@ import React, { useState } from "react";
 type FilterSectionProps = {
   title: string;
   items: string[];
+  additional?: any;
 };
 
-const FilterSection: React.FC<FilterSectionProps> = ({ title, items }) => {
+const FilterSection: React.FC<FilterSectionProps> = ({
+  title,
+  items,
+  additional,
+}) => {
   const [sectionOpen, setSectionOpen] = useState(false);
 
   const toggle = () => {
@@ -14,8 +19,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({ title, items }) => {
   return (
     <>
       <hr className="h-px my-2 bg-gray-500 border-0" />
-
-      <div className="flex justify-between">
+      <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}
@@ -27,6 +31,7 @@ const FilterSection: React.FC<FilterSectionProps> = ({ title, items }) => {
             {item}
           </h2>
         ))}
+      {sectionOpen && additional}
     </>
   );
 };