4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
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-muted-foreground/70" />
|
|
<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 };
|