Create button icon text component

refs #49
franthormel · Jul 18, 2024 · 72d2996 · 72d2996
1 parent a9b7536
commit 72d2996
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 4 deletions.
diff --git 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
@@ -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
diff --git a/stories/button-icon-text/ButtonIconText.stories.tsx 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>
+    ),
+};