diff --git a/app/listings/filter-beds-baths.tsx b/app/listings/filter-beds-baths.tsx
new file mode 100644
index 00000000..cda63562
--- /dev/null
+++ 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 (
+
+
+
+
+ );
+}
diff --git a/app/listings/filter-price.tsx b/app/listings/filter-price.tsx
new file mode 100644
index 00000000..7700c429
--- /dev/null
+++ b/app/listings/filter-price.tsx
@@ -0,0 +1,16 @@
+import FormInput from "@/components/form-input";
+
+export default function ListingsFilterPrice() {
+ return (
+
+ {/* TODO: Use price formatter */}
+
+ {/* TODO: Use price formatter */}
+
+
+ );
+}
diff --git a/app/listings/filters-area.tsx b/app/listings/filters-area.tsx
new file mode 100644
index 00000000..b1a22b4a
--- /dev/null
+++ b/app/listings/filters-area.tsx
@@ -0,0 +1,15 @@
+import FormInput from "@/components/form-input";
+
+export default function ListingsFilterArea() {
+ return (
+
+
+ {/* TODO: Create and use area formatter */}
+
+
+ );
+}
diff --git a/app/listings/search-filters-modal-content.tsx b/app/listings/search-filters-modal-content.tsx
index e890097e..25714601 100644
--- a/app/listings/search-filters-modal-content.tsx
+++ b/app/listings/search-filters-modal-content.tsx
@@ -1,11 +1,10 @@
-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 (
@@ -13,31 +12,15 @@ export default function ListingsSearchFiltersModalContent() {
{/* Price */}
- {/* TODO: Use price formatter */}
-
- {/* TODO: Use price formatter */}
-
+
{/* Beds/Baths */}
-
-
+
{/* Area */}
-
- {/* TODO: Create and use area formatter */}
-
+
{/* Reset and Search buttons */}
diff --git a/app/listings/search-filters.tsx b/app/listings/search-filters.tsx
index 00d36466..36099341 100644
--- 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() {
{/* Price filter */}
-
-
-
+
+ {/* TODO: Add widths for the dropdown content relative to the screen size */}
+
+
+
+
{/* Beds/Baths filter */}
-
-
-
+
+ {/* TODO: Add widths for the dropdown content relative to the screen size */}
+
+
+
+
{/* Area filter */}
-
-
-
+
+ {/* TODO: Add widths for the dropdown content relative to the screen size */}
+
+
+
+
{/* Filter menu */}
diff --git a/components/buttons/text-icon-outlined.tsx b/components/buttons/text-icon-outlined.tsx
index 567f89da..5ecb7688 100644
--- 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 (
-