78 lines
2.5 KiB
TypeScript
78 lines
2.5 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 StatsCardConfigPanelProps {
|
||
|
|
component: ComponentData;
|
||
|
|
onUpdateProperty: (path: string, value: any) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const StatsCardConfigPanel: React.FC<StatsCardConfigPanelProps> = ({ component, onUpdateProperty }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="stats-title">제목</Label>
|
||
|
|
<Input
|
||
|
|
id="stats-title"
|
||
|
|
value={config.title || "통계 제목"}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.title", e.target.value)}
|
||
|
|
placeholder="통계 제목을 입력하세요"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="stats-value">값</Label>
|
||
|
|
<Input
|
||
|
|
id="stats-value"
|
||
|
|
value={config.value || "1,234"}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.value", e.target.value)}
|
||
|
|
placeholder="통계 값을 입력하세요"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="stats-change">변화량</Label>
|
||
|
|
<Input
|
||
|
|
id="stats-change"
|
||
|
|
value={config.change || "+12.5%"}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.change", e.target.value)}
|
||
|
|
placeholder="변화량을 입력하세요 (예: +12.5%)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="stats-trend">트렌드</Label>
|
||
|
|
<Select
|
||
|
|
value={config.trend || "up"}
|
||
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.trend", value)}
|
||
|
|
>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="트렌드 선택" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="up">상승 (Up)</SelectItem>
|
||
|
|
<SelectItem value="down">하락 (Down)</SelectItem>
|
||
|
|
<SelectItem value="neutral">중립 (Neutral)</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="stats-description">설명</Label>
|
||
|
|
<Input
|
||
|
|
id="stats-description"
|
||
|
|
value={config.description || "전월 대비"}
|
||
|
|
onChange={(e) => onUpdateProperty("componentConfig.description", e.target.value)}
|
||
|
|
placeholder="설명을 입력하세요"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|