From 112e0ab8b752bf6713c9f28b2e4d5252450d6f42 Mon Sep 17 00:00:00 2001
From: Anass Bouassaba <ebouassaba@gmail.com>
Date: Tue, 29 Oct 2024 18:02:21 +0100
Subject: [PATCH] wip: add search-input component

---
 src/stories/components/search-bar.stories.tsx |  5 +++++
 .../components/search-input.stories.tsx       | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/stories/components/search-input.stories.tsx

diff --git a/src/stories/components/search-bar.stories.tsx b/src/stories/components/search-bar.stories.tsx
index 2e77c1c..2c344b8 100644
--- a/src/stories/components/search-bar.stories.tsx
+++ b/src/stories/components/search-bar.stories.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { IconButton } from '@chakra-ui/react'
 import { Meta, StoryObj } from '@storybook/react'
 import { IconTune, SearchBar } from '../../components'
@@ -15,4 +16,8 @@ export const Default: Story = {
     placeholder: 'Search',
     buttons: <IconButton icon={<IconTune />} aria-label="Filters" />,
   },
+  render: (args) => {
+    const [query, setQuery] = useState('')
+    return <SearchBar {...args} query={query} onSearch={setQuery} />
+  },
 }
diff --git a/src/stories/components/search-input.stories.tsx b/src/stories/components/search-input.stories.tsx
new file mode 100644
index 0000000..78e23a3
--- /dev/null
+++ b/src/stories/components/search-input.stories.tsx
@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { SearchInput } from '../../components'
+
+const meta: Meta<typeof SearchInput> = {
+  title: 'Components/Search Input',
+  component: SearchInput,
+}
+
+export default meta
+type Story = StoryObj<typeof SearchInput>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Search',
+  },
+  render: (args) => {
+    const [query, setQuery] = useState('')
+    return <SearchInput {...args} query={query} onChange={setQuery} />
+  },
+}