docs/app/components/command-k/components/trigger-button.tsx at cb8a2f3a0366c8ae4d244c6ab2393e1d373cac72 · code-forge-io/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { Icon } from "~/ui/icon/icon"
import { cn } from "~/utils/css"

export const TriggerButton = ({
	onOpen,
	placeholder,
}: {
	onOpen: () => void
	placeholder: string
}) => (
	<button
		type="button"
		onClick={onOpen}
		className={cn(
			"group flex items-center gap-2 rounded-lg border px-2 py-1.5 text-sm shadow-sm transition-all duration-200 xl:px-3 xl:py-2",
			"border-[var(--color-trigger-border)] bg-[var(--color-trigger-bg)] text-[var(--color-trigger-text)]",
			"hover:border-[var(--color-trigger-hover-border)] hover:bg-[var(--color-trigger-hover-bg)] hover:shadow-md",
			"focus:border-[var(--color-trigger-focus-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-trigger-focus-ring)]"
		)}
	>
		<Icon
			name="Search"
			className={cn("size-4 transition-colors", "group-hover:text-[var(--color-trigger-hover-text)]")}
		/>
		<span className="hidden xl:inline">{placeholder}</span>
		<div className="ml-auto hidden items-center gap-1 xl:flex">
			<kbd
				className={cn(
					"rounded border border-[var(--color-kbd-border)] bg-[var(--color-kbd-bg)] px-1.5 py-0.5 font-mono text-xs",
					"text-[var(--color-kbd-text)]"
				)}
			>
				⌘
			</kbd>
			<kbd
				className={cn(
					"rounded border border-[var(--color-kbd-border)] bg-[var(--color-kbd-bg)] px-1.5 py-0.5 font-mono text-xs",
					"text-[var(--color-kbd-text)]"
				)}
			>
				K
			</kbd>
		</div>
	</button>
)