TODO: Add dropdown content for search filters

refs #49
franthormel · Aug 1, 2024 · 0cfc375 · 0cfc375
1 parent 337dcb7
commit 0cfc375
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 60 deletions.
diff --git a/app/listings/filter-beds-baths.tsx b/app/listings/filter-beds-baths.tsx
@@ -0,0 +1,14 @@
+import ButtonsSegmentedLabelled from "@/components/buttons-segmented/labelled";
+
+export default function ListingsFiltersBedsBaths() {
+    const bedsBathsOptions = ["Any", "1", "2", "3", "4", "5+"];
+
+    return (
+        <div>
+            <ButtonsSegmentedLabelled label="Beds"
+                values={bedsBathsOptions} />
+            <ButtonsSegmentedLabelled label="Baths"
+                values={bedsBathsOptions} />
+        </div>
+    );
+}
diff --git a/app/listings/filter-price.tsx b/app/listings/filter-price.tsx
@@ -0,0 +1,16 @@
+import FormInput from "@/components/form-input";
+
+export default function ListingsFilterPrice() {
+    return (
+        <div>
+            {/* TODO: Use price formatter */}
+            <FormInput label="Minimum Price"
+                name="price-min"
+                placeholder="None" />
+            {/* TODO: Use price formatter */}
+            <FormInput label="Maximum Price"
+                name="price-min"
+                placeholder="₱ 10,000,000" />
+        </div>
+    );
+}
diff --git a/app/listings/filters-area.tsx b/app/listings/filters-area.tsx
@@ -0,0 +1,15 @@
+import FormInput from "@/components/form-input";
+
+export default function ListingsFilterArea() {
+    return (
+        <div>
+            <FormInput label="Minimum Area"
+                name="area-min"
+                placeholder="None" />
+            {/* TODO: Create and use area formatter */}
+            <FormInput label="Maximum Area"
+                name="area-min"
+                placeholder="100 sqm." />
+        </div>
+    );
+}
diff --git a/app/listings/search-filters-modal-content.tsx b/app/listings/search-filters-modal-content.tsx
@@ -1,43 +1,26 @@
-import ButtonsSegmentedLabelled from "@/components/buttons-segmented/labelled";
 import ButtonFilled from "@/components/buttons/filled";
-import FormInput from "@/components/form-input";
 import FormInputReset from "@/components/form-input/reset";
+import ListingsFiltersBedsBaths from "./filter-beds-baths";
+import ListingsFilterPrice from "./filter-price";
+import ListingsFilterArea from "./filters-area";
 
 export default function ListingsSearchFiltersModalContent() {
-    const bedsBathsOptions = ["Any", "1", "2", "3", "4", "5+"];
-
     return (
         <div className="flex flex-col gap-8 p-8">
             <header className="text-2xl font-bold">
                 Filters
             </header>
             {/* Price */}
             <div className="flex max-w-[80%] flex-col gap-5">
-                {/* TODO: Use price formatter */}
-                <FormInput label="Minimum Price"
-                    name="price-min"
-                    placeholder="None" />
-                {/* TODO: Use price formatter */}
-                <FormInput label="Maximum Price"
-                    name="price-min"
-                    placeholder="₱ 10,000,000" />
+                <ListingsFilterPrice />
             </div>
             {/* Beds/Baths */}
             <div className="flex flex-col gap-5">
-                <ButtonsSegmentedLabelled label="Beds"
-                    values={bedsBathsOptions} />
-                <ButtonsSegmentedLabelled label="Baths"
-                    values={bedsBathsOptions} />
+                <ListingsFiltersBedsBaths />
             </div>
             {/* Area */}
             <div className="flex max-w-[80%] flex-col gap-5">
-                <FormInput label="Minimum Area"
-                    name="area-min"
-                    placeholder="None" />
-                {/* TODO: Create and use area formatter */}
-                <FormInput label="Maximum Area"
-                    name="area-min"
-                    placeholder="100 sqm." />
+                <ListingsFilterArea />
             </div>
             {/* Reset and Search buttons */}
             <div className="flex justify-center gap-10">

diff --git a/app/listings/search-filters.tsx b/app/listings/search-filters.tsx
@@ -1,5 +1,10 @@
-import ButtonTextIconOutlined from "@/components/buttons/text-icon-outlined";
+"use client"
+
+import Dropdown from "@/components/dropdown";
 import Search from "@/components/search";
+import ListingsFiltersBedsBaths from "./filter-beds-baths";
+import ListingsFilterPrice from "./filter-price";
+import ListingsFilterArea from "./filters-area";
 import ListingsSearchFiltersMenu from "./search-filters-menu";
 
 export function ListingsSearchFilters() {
@@ -11,45 +16,30 @@ export function ListingsSearchFilters() {
             </div>
             {/* Price filter */}
             <div className="hidden md:flex">
-                <ButtonTextIconOutlined props={{
-                    text: "Price",
-                    dataCy: "button-filter-price"
-                }}>
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 -960 960 960"
-                        height="24"
-                        width="24">
-                        <path d="M480-360 280-560h400L480-360Z" />
-                    </svg>
-                </ButtonTextIconOutlined>
+                <Dropdown props={{ text: "Price" }}>
+                    {/* TODO: Add widths for the dropdown content relative to the screen size */}
+                    <div className="md:w-48">
+                        <ListingsFilterPrice />
+                    </div>
+                </Dropdown>
             </div>
             {/* Beds/Baths filter */}
             <div className="hidden lg:flex">
-                <ButtonTextIconOutlined props={{
-                    text: "Beds/Baths",
-                    dataCy: "button-filter-beds-baths"
-                }}>
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 -960 960 960"
-                        height="24"
-                        width="24">
-                        <path d="M480-360 280-560h400L480-360Z" />
-                    </svg>
-                </ButtonTextIconOutlined>
+                <Dropdown props={{ text: "Beds/Baths" }}>
+                    {/* TODO: Add widths for the dropdown content relative to the screen size */}
+                    <div className="w-32">
+                        <ListingsFiltersBedsBaths />
+                    </div>
+                </Dropdown>
             </div>
             {/* Area filter */}
             <div className="hidden lg:flex">
-                <ButtonTextIconOutlined props={{
-                    text: "Area",
-                    dataCy: "button-filter-area"
-                }}>
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 -960 960 960"
-                        height="24"
-                        width="24">
-                        <path d="M480-360 280-560h400L480-360Z" />
-                    </svg>
-                </ButtonTextIconOutlined>
+                <Dropdown props={{ text: "Area" }}>
+                    {/* TODO: Add widths for the dropdown content relative to the screen size */}
+                    <div className="w-32">
+                        <ListingsFilterArea />
+                    </div>
+                </Dropdown>
             </div>
             {/* Filter menu */}
             <ListingsSearchFiltersMenu />

diff --git a/components/buttons/text-icon-outlined.tsx b/components/buttons/text-icon-outlined.tsx
@@ -9,7 +9,7 @@ export interface ButtonTextIconOutlinedProps {
 // NOTE: Text -> Icon
 export default function ButtonTextIconOutlined({ children, props }: { children: React.ReactNode, props: ButtonTextIconOutlinedProps }) {
     return (
-        <button className="rounded-full bg-slate-50 px-5 py-2 outline outline-1 outline-gray-800 transition-all 
+        <button className="rounded-full bg-slate-50 px-5 py-2 outline outline-1 outline-gray-800 transition-all
                         // Button and text hover color
                         hover:bg-gray-800 hover:text-slate-50 
                         // SVG Icon hover color

diff --git a/components/dropdown/index.tsx b/components/dropdown/index.tsx
@@ -11,7 +11,7 @@ export default function Dropdown({ children, props }: { children: ReactNode, pro
     const [showContent, setShowContent] = useState<boolean>(false);
 
     return (
-        <div className="relative">
+        <div className="relative flex">
             <ButtonTextIconOutlined props={{
                 text: props.text,
                 onClick: (e) => {
@@ -27,7 +27,7 @@ export default function Dropdown({ children, props }: { children: ReactNode, pro
             </ButtonTextIconOutlined>
             {/* NOTE: Width can be customized by the child component */}
             {showContent &&
-                <div className="bg-background absolute z-20 mt-2 w-fit rounded-md border border-gray-200 p-4 shadow-md">
+                <div className="absolute top-16 z-20 w-fit rounded-md border border-gray-200 bg-slate-50 p-4 shadow-md">
                     {children}
                 </div>}
         </div>