106 lines
3.4 KiB
TypeScript
106 lines
3.4 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { NumberingRuleComponentConfig } from "./types";
|
|
|
|
interface NumberingRuleConfigPanelProps {
|
|
config: NumberingRuleComponentConfig;
|
|
onChange: (config: NumberingRuleComponentConfig) => void;
|
|
}
|
|
|
|
export const NumberingRuleConfigPanel: React.FC<NumberingRuleConfigPanelProps> = ({
|
|
config,
|
|
onChange,
|
|
}) => {
|
|
return (
|
|
<div className="space-y-4 p-4">
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium">최대 규칙 수</Label>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
max={10}
|
|
value={config.maxRules || 6}
|
|
onChange={(e) =>
|
|
onChange({ ...config, maxRules: parseInt(e.target.value) || 6 })
|
|
}
|
|
className="h-9"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
한 규칙에 추가할 수 있는 최대 파트 개수 (1-10)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label className="text-sm font-medium">읽기 전용 모드</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
편집 기능을 비활성화합니다
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.readonly || false}
|
|
onCheckedChange={(checked) =>
|
|
onChange({ ...config, readonly: checked })
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label className="text-sm font-medium">미리보기 표시</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
코드 미리보기를 항상 표시합니다
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.showPreview !== false}
|
|
onCheckedChange={(checked) =>
|
|
onChange({ ...config, showPreview: checked })
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-0.5">
|
|
<Label className="text-sm font-medium">규칙 목록 표시</Label>
|
|
<p className="text-xs text-muted-foreground">
|
|
저장된 규칙 목록을 표시합니다
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.showRuleList !== false}
|
|
onCheckedChange={(checked) =>
|
|
onChange({ ...config, showRuleList: checked })
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium">카드 레이아웃</Label>
|
|
<Select
|
|
value={config.cardLayout || "vertical"}
|
|
onValueChange={(value: "vertical" | "horizontal") =>
|
|
onChange({ ...config, cardLayout: value })
|
|
}
|
|
>
|
|
<SelectTrigger className="h-9">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="vertical">세로</SelectItem>
|
|
<SelectItem value="horizontal">가로</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-xs text-muted-foreground">
|
|
규칙 파트 카드의 배치 방향
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|