86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import { ChevronDown, ChevronRight, Trash2 } from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { VariantConditionEditor } from "./VariantConditionEditor";
|
||
import { VariantOverridesEditor } from "./VariantOverridesEditor";
|
||
import type { VariantPanelProps } from "./types";
|
||
import { ensureCondition } from "./utils";
|
||
|
||
/**
|
||
* Панель управления одним вариантом экрана
|
||
* Включает условия показа и переопределения настроек
|
||
*/
|
||
export function VariantPanel({
|
||
variant,
|
||
index,
|
||
isExpanded,
|
||
baseScreen,
|
||
allScreens,
|
||
onToggle,
|
||
onChange,
|
||
onDelete,
|
||
}: VariantPanelProps) {
|
||
const condition = ensureCondition(variant, allScreens[0]?.id ?? "");
|
||
|
||
return (
|
||
<div className="border border-border rounded-lg overflow-hidden">
|
||
{/* Header */}
|
||
<div
|
||
className="flex items-center justify-between p-3 bg-muted/30 cursor-pointer hover:bg-muted/50"
|
||
onClick={onToggle}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
{isExpanded ? (
|
||
<ChevronDown className="h-4 w-4" />
|
||
) : (
|
||
<ChevronRight className="h-4 w-4" />
|
||
)}
|
||
<span className="text-sm font-medium">Вариант {index + 1}</span>
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDelete();
|
||
}}
|
||
className="h-7 w-7 p-0"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
{isExpanded && (
|
||
<div className="p-3 space-y-4">
|
||
{/* Условие */}
|
||
<div>
|
||
<h4 className="text-sm font-semibold mb-2">Условие показа</h4>
|
||
<VariantConditionEditor
|
||
condition={condition}
|
||
allScreens={allScreens}
|
||
onChange={(newCondition) =>
|
||
onChange({ ...variant, conditions: [newCondition] })
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
{/* Переопределения */}
|
||
<div>
|
||
<h4 className="text-sm font-semibold mb-2">
|
||
Переопределения настроек
|
||
</h4>
|
||
<VariantOverridesEditor
|
||
baseScreen={baseScreen}
|
||
overrides={variant.overrides ?? {}}
|
||
onChange={(newOverrides) =>
|
||
onChange({ ...variant, overrides: newOverrides })
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|