Nam Doan
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import React from "react"
|
|
import { MagnifyingGlass } from "@medusajs/icons"
|
|
import {
|
|
LayoutComponentDefinition,
|
|
LayoutContext,
|
|
} from "@vibentec/component-map"
|
|
|
|
export default function VtSearchInput({
|
|
nodes,
|
|
context,
|
|
}: {
|
|
nodes: LayoutComponentDefinition
|
|
context: LayoutContext
|
|
}) {
|
|
const props = nodes.config || {}
|
|
const placeholder = props.placeholder ?? "Search"
|
|
const shortcut = props.shortcut ?? "⌘K"
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
`flex items-center gap-3 w-full max-w-xl bg-white border border-grey-20 rounded-rounded shadow-sm px-4 py-2 ${
|
|
props?.className ?? ""
|
|
}`
|
|
}
|
|
>
|
|
<MagnifyingGlass className="text-[#11314E]" />
|
|
<input
|
|
type="search"
|
|
placeholder={placeholder}
|
|
className="flex-1 bg-transparent outline-none text-[#11314E] placeholder:text-[#11314E]"
|
|
/>
|
|
{shortcut && (
|
|
<span className="text-[#11314E] border border-grey-30 rounded-rounded px-2 py-0.5 text-sm">
|
|
{shortcut}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
} |