71 lines
2.4 KiB
TypeScript
71 lines
2.4 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 { Switch } from "@/components/ui/switch";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { ComponentData } from "@/types/screen";
|
|
|
|
interface AlertConfigPanelProps {
|
|
component: ComponentData;
|
|
onUpdateProperty: (path: string, value: any) => void;
|
|
}
|
|
|
|
export const AlertConfigPanel: React.FC<AlertConfigPanelProps> = ({ component, onUpdateProperty }) => {
|
|
const config = component.componentConfig || {};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="alert-title">제목</Label>
|
|
<Input
|
|
id="alert-title"
|
|
value={config.title || "알림 제목"}
|
|
onChange={(e) => onUpdateProperty("componentConfig.title", e.target.value)}
|
|
placeholder="알림 제목을 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="alert-message">메시지</Label>
|
|
<Textarea
|
|
id="alert-message"
|
|
value={config.message || "알림 메시지입니다."}
|
|
onChange={(e) => onUpdateProperty("componentConfig.message", e.target.value)}
|
|
placeholder="알림 메시지를 입력하세요"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="alert-type">알림 타입</Label>
|
|
<Select
|
|
value={config.type || "info"}
|
|
onValueChange={(value) => onUpdateProperty("componentConfig.type", value)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="알림 타입 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="info">정보 (Info)</SelectItem>
|
|
<SelectItem value="warning">경고 (Warning)</SelectItem>
|
|
<SelectItem value="success">성공 (Success)</SelectItem>
|
|
<SelectItem value="error">오류 (Error)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Switch
|
|
id="show-icon"
|
|
checked={config.showIcon ?? true}
|
|
onCheckedChange={(checked) => onUpdateProperty("componentConfig.showIcon", checked)}
|
|
/>
|
|
<Label htmlFor="show-icon">아이콘 표시</Label>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|