83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Switch } from "@/components/ui/switch";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
|
||
|
|
interface ProgressBarConfigPanelProps {
|
||
|
|
component: ComponentData;
|
||
|
|
onUpdateProperty: (path: string, value: any) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({ component, onUpdateProperty }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="progress-label">라벨</Label>
|
||
|
|
<Input
|
||
|
|
id="progress-label"
|
||
|
|
value={config.label || "진행률"}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.label", e.target.value)}
|
||
|
|
placeholder="진행률 라벨을 입력하세요"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="progress-value">현재 값</Label>
|
||
|
|
<Input
|
||
|
|
id="progress-value"
|
||
|
|
type="number"
|
||
|
|
value={config.value || 65}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.value", parseInt(e.target.value) || 0)}
|
||
|
|
placeholder="현재 값"
|
||
|
|
min="0"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="progress-max">최대 값</Label>
|
||
|
|
<Input
|
||
|
|
id="progress-max"
|
||
|
|
type="number"
|
||
|
|
value={config.max || 100}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.max", parseInt(e.target.value) || 100)}
|
||
|
|
placeholder="최대 값"
|
||
|
|
min="1"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="progress-color">진행률 색상</Label>
|
||
|
|
<Input
|
||
|
|
id="progress-color"
|
||
|
|
type="color"
|
||
|
|
value={config.color || "#3b82f6"}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.color", e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Switch
|
||
|
|
id="show-percentage"
|
||
|
|
checked={config.showPercentage ?? true}
|
||
|
|
onCheckedChange={(checked) => onUpdateProperty("componentConfig.showPercentage", checked)}
|
||
|
|
/>
|
||
|
|
<Label htmlFor="show-percentage">퍼센트 표시</Label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<Switch
|
||
|
|
id="show-value"
|
||
|
|
checked={config.showValue ?? true}
|
||
|
|
onCheckedChange={(checked) => onUpdateProperty("componentConfig.showValue", checked)}
|
||
|
|
/>
|
||
|
|
<Label htmlFor="show-value">값 표시</Label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|