From eb1e14f6592b1570fc3adea2657177341757ec40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?T=C3=BCrkan=20Demirci?= <demirciiturkan@gmail.com>
Date: Tue, 24 Sep 2024 18:42:56 +0300
Subject: [PATCH] feat(BCL-18): add search input component

---
 src/components/index.ts                       |  3 +-
 .../ui/search-input/search-input.stories.tsx  | 43 +++++++++++++++++++
 .../ui/search-input/search-input.tsx          | 31 +++++++++++++
 .../ui/search-input/search-input.type.ts      |  6 +++
 4 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/search-input/search-input.stories.tsx
 create mode 100644 src/components/ui/search-input/search-input.tsx
 create mode 100644 src/components/ui/search-input/search-input.type.ts

diff --git a/src/components/index.ts b/src/components/index.ts
index 7ba8822..e259d15 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,11 +3,10 @@ export * from "./ui/select/select";
 export * from "./ui/checkbox/checkbox";
 export * from "./ui/tabs/tabs";
 export * from "./ui/card/card";
-
 export * from "./ui/dialog/dialog";
 export * from "./ui/tag/tag";
 export * from "./ui/avatar/avatar";
-
 export * from "./ui/context-menu/context-menu";
 export * from "./ui/textarea/textarea";
 export * from "./ui/dropdown-menu/dropdown-menu";
+export * from "./ui/search-input/search-input";
diff --git a/src/components/ui/search-input/search-input.stories.tsx b/src/components/ui/search-input/search-input.stories.tsx
new file mode 100644
index 0000000..f0d69c4
--- /dev/null
+++ b/src/components/ui/search-input/search-input.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import React from "react";
+
+import { Mail, ArrowRight } from "lucide-react";
+import SearchInput from "./search-input";
+
+const meta = {
+  title: "Atom/SearchInput",
+  component: SearchInput,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      options: ["sm", "md"],
+      control: { type: "select" },
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchInput>;
+
+export default meta;
+
+const Template: StoryObj<typeof SearchInput> = {
+  render: (args) => (
+    <div className="w-[150">
+      <SearchInput {...args}></SearchInput>
+    </div>
+  ),
+};
+
+export const Primary = {
+  ...Template,
+  args: {
+    prefixItem: <Mail size={16} />,
+    text: "Menu Item",
+    suffixItem: <ArrowRight size={16} />,
+  },
+};
diff --git a/src/components/ui/search-input/search-input.tsx b/src/components/ui/search-input/search-input.tsx
new file mode 100644
index 0000000..699ac08
--- /dev/null
+++ b/src/components/ui/search-input/search-input.tsx
@@ -0,0 +1,31 @@
+import { ISearchInput } from "./search-input.type";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const SearchInput = ({
+  size = "md",
+  placeholder = "Search",
+  className,
+  disabled,
+}: ISearchInput) => {
+  return (
+    <div className="relative h-fit w-full">
+      <input
+        type="text"
+        disabled={disabled}
+        placeholder={placeholder}
+        className={cn(
+          "w-full px-3 pl-8 py-2 rounded-md border border-input focus:outline-none focus:border-primary placeholder:text-muted-foreground placeholder:text-sm h-10",
+          disabled && "opacity-disabled",
+          size === "sm" && "h-8",
+          className
+        )}
+      />
+      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <Search className={`text-muted-foreground w-4 h-4`} />
+      </div>
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/src/components/ui/search-input/search-input.type.ts b/src/components/ui/search-input/search-input.type.ts
new file mode 100644
index 0000000..3cde217
--- /dev/null
+++ b/src/components/ui/search-input/search-input.type.ts
@@ -0,0 +1,6 @@
+export interface ISearchInput {
+  size?: "sm" | "md";
+  className?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}