Sidebar searchbar (#649)

lib/experimental/Navigation/Sidebar/Searchbar/index.stories.tsx

@@ -0,0 +1,29 @@
+import { action } from "@storybook/addon-actions"
+import type { Meta, StoryObj } from "@storybook/react"
+import { SearchBar } from "."
+
+const meta = {
+ component: SearchBar,
+ parameters: {
+ layout: "centered",
+ },
+ decorators: [
+ (Story) => (
+ <div className="w-[240px] bg-f1-background-tertiary p-3">
+ <Story />
+ </div>
+ ),
+ ],
+ tags: ["autodocs"],
+} satisfies Meta<typeof SearchBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+ args: {
+ placeholder: "Search...",
+ onClick: action("SearchBar clicked"),
+ shortcut: ["cmd", "k"],
+ },
+}

lib/experimental/Navigation/Sidebar/Searchbar/index.tsx

@@ -0,0 +1,35 @@
+import { Icon } from "@/components/Utilities/Icon"
+import { Shortcut } from "@/experimental/Information/Shortcut"
+import { Search } from "@/icons"
+import { cn, focusRing } from "@/lib/utils"
+import { ButtonHTMLAttributes } from "react"
+
+interface SearchBarProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+ placeholder: string
+ shortcut?: string[]
+}
+
+export function SearchBar({
+ onClick,
+ placeholder,
+ shortcut = ["cmd", "k"],
+ ...props
+}: SearchBarProps) {
+ return (
+ <button
+ onClick={onClick}
+ className={cn(
+ "flex w-full cursor-pointer items-center justify-between rounded border border-solid border-f1-border bg-f1-background p-1.5 text-f1-foreground-secondary transition-colors hover:border-f1-border-hover",
+ focusRing()
+ )}
+ type="button"
+ {...props}
+ >
+ <div className="flex items-center gap-1">
+ <Icon icon={Search} size="md" />
+ <span>{placeholder}</span>
+ </div>
+ <Shortcut keys={shortcut} />
+ </button>
+ )
+}