35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Search } from "lucide-react";
|
||
|
|
|
||
|
|
// 검색 박스 컴포넌트 렌더러
|
||
|
|
const SearchBoxRenderer: ComponentRenderer = ({ component, ...props }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
const { placeholder = "검색어를 입력하세요...", showButton = true, buttonText = "검색", style = {} } = config;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full items-center gap-2 p-2" style={style}>
|
||
|
|
<div className="relative flex-1">
|
||
|
|
<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
||
|
|
<Input placeholder={placeholder} className="pointer-events-none pl-10" disabled />
|
||
|
|
</div>
|
||
|
|
{showButton && (
|
||
|
|
<Button className="pointer-events-none" disabled>
|
||
|
|
{buttonText}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 레지스트리에 등록
|
||
|
|
componentRegistry.register("search", SearchBoxRenderer);
|
||
|
|
componentRegistry.register("search-box", SearchBoxRenderer);
|
||
|
|
|
||
|
|
export { SearchBoxRenderer };
|