feat(BCL-18): add search input component

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";

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} />,
+  },
+};

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;

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;
+}