From 72d29962d9a3dc5b030a285cc848c1693100d009 Mon Sep 17 00:00:00 2001
From: Francis Anthony <fcaboyo@gmail.com>
Date: Tue, 16 Jul 2024 19:15:21 +0800
Subject: [PATCH] Create button icon text component

refs #49
---
 app/listings/page.tsx                         | 24 +++++++++++---
 components/buttons/icon-text.tsx              | 26 +++++++++++++++
 public/icons/filter_list.svg                  |  4 +++
 .../ButtonIconText.stories.tsx                | 32 +++++++++++++++++++
 4 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 components/buttons/icon-text.tsx
 create mode 100644 public/icons/filter_list.svg
 create mode 100644 stories/button-icon-text/ButtonIconText.stories.tsx

diff --git a/app/listings/page.tsx b/app/listings/page.tsx
index a4fd7a01..4421ab8d 100644
--- a/app/listings/page.tsx
+++ b/app/listings/page.tsx
@@ -1,12 +1,28 @@
+import ButtonIconTextOutlined from "@/components/buttons/icon-text";
 import Search from "@/components/search";
 
 export default function Home() {
     return (
-        <div>
+        <div className="px-8 md:px-10">
             {/* TODO: TOP */}
-            <div>
-                <Search />
-                {/* TODO: Filter button */}
+            <div className="flex gap-x-4">
+                <div className="w-full">
+                    <Search />
+                </div>
+                <ButtonIconTextOutlined props={{
+                    text: "Filter",
+                    dataCy: "button-filter"
+                }}>
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                        height="24"
+                        width="24"
+                        viewBox="0 -960 960 960">
+                        <path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z" />
+                    </svg>
+                </ButtonIconTextOutlined>
+                {/* TODO: Price */}
+                {/* TODO: Beds/Baths */}
+                {/* TODO: Area */}
             </div>
         </div>
     );
diff --git a/components/buttons/icon-text.tsx b/components/buttons/icon-text.tsx
new file mode 100644
index 00000000..55161042
--- /dev/null
+++ b/components/buttons/icon-text.tsx
@@ -0,0 +1,26 @@
+import { MouseEventHandler } from "react";
+
+export interface ButtonIconTextOutlinedProps {
+    text: string;
+    onClick?: MouseEventHandler;
+    dataCy?: string;
+}
+
+export default function ButtonIconTextOutlined({ children, props }: { children: React.ReactNode, props: ButtonIconTextOutlinedProps }) {
+    return (
+        <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
+                        fill-gray-800 hover:fill-slate-50"
+            data-cy={props.dataCy ?? "button-icon-text"}
+            onClick={props.onClick}>
+            <div className="flex">
+                <div className="mr-1">
+                    {children}
+                </div>
+                {props.text}
+            </div>
+        </button>
+    );
+}
diff --git a/public/icons/filter_list.svg b/public/icons/filter_list.svg
new file mode 100644
index 00000000..ee6e3be2
--- /dev/null
+++ b/public/icons/filter_list.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
+    fill="#5f6368">
+    <path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z" />
+</svg>
\ No newline at end of file
diff --git a/stories/button-icon-text/ButtonIconText.stories.tsx b/stories/button-icon-text/ButtonIconText.stories.tsx
new file mode 100644
index 00000000..b490d1c5
--- /dev/null
+++ b/stories/button-icon-text/ButtonIconText.stories.tsx
@@ -0,0 +1,32 @@
+import ButtonIconTextOutlined from "@/components/buttons/icon-text";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ButtonIconTextOutlined> = {
+    title: "Buttons/Icon Text/Outlined",
+    component: ButtonIconTextOutlined,
+    tags: ["autodocs"],
+} satisfies Meta<typeof ButtonIconTextOutlined>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+    args: {
+        props: {
+            text: "Filter",
+            onClick: () => {
+                console.log("Added to favorites 💗");
+            },
+        },
+    },
+    render: (args) => (
+        <ButtonIconTextOutlined {...args}>
+            <svg xmlns="http://www.w3.org/2000/svg"
+                height="24"
+                width="24"
+                viewBox="0 -960 960 960">
+                <path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z" />
+            </svg>
+        </ButtonIconTextOutlined>
+    ),
+};