feat:create component add vibentec config design page

2025-11-28 13:12:00 +07:00
parent 09b01f1d6b
commit 497c060756
12 changed files with 385 additions and 48 deletions
@@ -0,0 +1,40 @@
+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>
+  )
+}