66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { ComponentData } from "@/types/screen";
|
|
|
|
interface BadgeConfigPanelProps {
|
|
component: ComponentData;
|
|
onUpdateProperty: (path: string, value: any) => void;
|
|
}
|
|
|
|
export const BadgeConfigPanel: React.FC<BadgeConfigPanelProps> = ({ component, onUpdateProperty }) => {
|
|
const config = component.componentConfig || {};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="badge-text">뱃지 텍스트</Label>
|
|
<Input
|
|
id="badge-text"
|
|
value={config.text || "상태"}
|
|
onChange={(e) => onUpdateProperty("componentConfig.text", e.target.value)}
|
|
placeholder="뱃지 텍스트를 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="badge-variant">뱃지 스타일</Label>
|
|
<Select
|
|
value={config.variant || "default"}
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.variant", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="뱃지 스타일 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="default">기본 (Default)</SelectItem>
|
|
<SelectItem value="secondary">보조 (Secondary)</SelectItem>
|
|
<SelectItem value="destructive">위험 (Destructive)</SelectItem>
|
|
<SelectItem value="outline">외곽선 (Outline)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="badge-size">뱃지 크기</Label>
|
|
<Select
|
|
value={config.size || "default"}
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.size", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="뱃지 크기 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="small">작음 (Small)</SelectItem>
|
|
<SelectItem value="default">기본 (Default)</SelectItem>
|
|
<SelectItem value="large">큼 (Large)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|