79 lines
2.3 KiB
TypeScript
79 lines
2.3 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";
|
|
|
|
interface SplitLineConfigPanelProps {
|
|
config: any;
|
|
onConfigChange: (config: any) => void;
|
|
}
|
|
|
|
/**
|
|
* SplitLine 설정 패널
|
|
*/
|
|
export const SplitLineConfigPanel: React.FC<SplitLineConfigPanelProps> = ({ config, onConfigChange }) => {
|
|
const currentConfig = config || {};
|
|
|
|
const handleChange = (key: string, value: any) => {
|
|
onConfigChange({
|
|
...currentConfig,
|
|
[key]: value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4 p-4">
|
|
<h3 className="text-sm font-semibold">스플릿선 설정</h3>
|
|
|
|
{/* 드래그 리사이즈 허용 */}
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">드래그 리사이즈</Label>
|
|
<Switch
|
|
checked={currentConfig.resizable ?? true}
|
|
onCheckedChange={(checked) => handleChange("resizable", checked)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 분할선 스타일 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">분할선 두께 (px)</Label>
|
|
<Input
|
|
type="number"
|
|
value={currentConfig.lineWidth || 4}
|
|
onChange={(e) => handleChange("lineWidth", parseInt(e.target.value) || 4)}
|
|
className="h-8 text-xs"
|
|
min={1}
|
|
max={12}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">분할선 색상</Label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
value={currentConfig.lineColor || "#e2e8f0"}
|
|
onChange={(e) => handleChange("lineColor", e.target.value)}
|
|
className="h-8 w-8 cursor-pointer rounded border"
|
|
/>
|
|
<Input
|
|
value={currentConfig.lineColor || "#e2e8f0"}
|
|
onChange={(e) => handleChange("lineColor", e.target.value)}
|
|
className="h-8 flex-1 text-xs"
|
|
placeholder="#e2e8f0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-[10px] text-muted-foreground">
|
|
캔버스에서 스플릿선의 X 위치가 초기 분할 지점이 됩니다.
|
|
런타임에서 드래그하면 좌우 컴포넌트가 함께 이동합니다.
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SplitLineConfigPanel;
|