80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
|
|
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
|
|
|
|
interface BadgeConfigPanelProps {
|
|
config?: Record<string, any>;
|
|
onChange?: (key: string, value: any) => void;
|
|
component?: any;
|
|
onUpdateProperty?: (path: string, value: any) => void;
|
|
}
|
|
|
|
const sections: ConfigSectionDefinition[] = [
|
|
{
|
|
id: "content",
|
|
title: "콘텐츠",
|
|
fields: [
|
|
{
|
|
key: "text",
|
|
label: "뱃지 텍스트",
|
|
type: "text",
|
|
placeholder: "뱃지 텍스트를 입력하세요",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "style",
|
|
title: "스타일",
|
|
fields: [
|
|
{
|
|
key: "variant",
|
|
label: "뱃지 스타일",
|
|
type: "select",
|
|
options: [
|
|
{ label: "기본 (Default)", value: "default" },
|
|
{ label: "보조 (Secondary)", value: "secondary" },
|
|
{ label: "위험 (Destructive)", value: "destructive" },
|
|
{ label: "외곽선 (Outline)", value: "outline" },
|
|
],
|
|
},
|
|
{
|
|
key: "size",
|
|
label: "뱃지 크기",
|
|
type: "select",
|
|
options: [
|
|
{ label: "작음 (Small)", value: "small" },
|
|
{ label: "기본 (Default)", value: "default" },
|
|
{ label: "큼 (Large)", value: "large" },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export const BadgeConfigPanel: React.FC<BadgeConfigPanelProps> = ({
|
|
config: directConfig,
|
|
onChange: directOnChange,
|
|
component,
|
|
onUpdateProperty,
|
|
}) => {
|
|
const config = directConfig || component?.componentConfig || {};
|
|
|
|
const handleChange = (key: string, value: any) => {
|
|
if (directOnChange) {
|
|
directOnChange(key, value);
|
|
} else if (onUpdateProperty) {
|
|
onUpdateProperty(`componentConfig.${key}`, value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ConfigPanelBuilder
|
|
config={config}
|
|
onChange={handleChange}
|
|
sections={sections}
|
|
/>
|
|
);
|
|
};
|