nikita
106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
// modules/dashboard/components/WidgetSettings.tsx
|
||
import React, { useState } from "react";
|
||
import { motion } from "framer-motion";
|
||
import type { ChartType, ChartWidget } from "../types";
|
||
|
||
interface WidgetSettingsProps {
|
||
widget: ChartWidget;
|
||
onUpdate: (widget: ChartWidget) => void;
|
||
onRemove: () => void;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export const WidgetSettings: React.FC<WidgetSettingsProps> = ({
|
||
widget,
|
||
onUpdate,
|
||
onRemove,
|
||
onClose,
|
||
}) => {
|
||
const [type, setType] = useState<ChartType>(widget.type);
|
||
const [title, setTitle] = useState(widget.title);
|
||
|
||
const handleSave = () => {
|
||
onUpdate({ ...widget, type, title });
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||
onClick={onClose}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0.95, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
exit={{ scale: 0.95, opacity: 0 }}
|
||
className="bg-secondary rounded-xl shadow-large border border-primary w-80 p-3"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<h3 className="text-xs font-semibold text-primary mb-3">
|
||
Настройки графика
|
||
</h3>
|
||
|
||
<div className="space-y-2">
|
||
<div>
|
||
<label className="block text-[10px] text-secondary mb-1">Тип</label>
|
||
<div className="flex gap-1">
|
||
{(["line", "bar", "area", "pie"] as ChartType[]).map((t) => (
|
||
<button
|
||
key={t}
|
||
onClick={() => setType(t)}
|
||
className={`px-2 py-0.5 rounded text-[10px] transition-colors cursor-pointer ${
|
||
type === t
|
||
? "bg-accent-primary text-white"
|
||
: "bg-tertiary text-secondary hover:bg-tertiary/70"
|
||
}`}
|
||
>
|
||
{t === "line" && "📈"}
|
||
{t === "bar" && "📊"}
|
||
{t === "area" && "📉"}
|
||
{t === "pie" && "🥧"}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-[10px] text-secondary mb-1">
|
||
Название
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={title}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
className="w-full px-2 py-1 text-[11px] bg-tertiary border border-primary rounded text-primary focus:outline-none focus:border-accent-primary"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex gap-1 pt-2">
|
||
<button
|
||
onClick={handleSave}
|
||
className="flex-1 px-2 py-1 bg-accent-primary text-white rounded text-[10px] hover:bg-accent-hover transition-colors cursor-pointer"
|
||
>
|
||
Сохранить
|
||
</button>
|
||
<button
|
||
onClick={onRemove}
|
||
className="px-2 py-1 bg-red-500/10 text-red-500 rounded text-[10px] hover:bg-red-500/20 transition-colors cursor-pointer"
|
||
>
|
||
Удалить
|
||
</button>
|
||
<button
|
||
onClick={onClose}
|
||
className="px-2 py-1 bg-tertiary text-secondary rounded text-[10px] hover:bg-secondary transition-colors cursor-pointer"
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
);
|
||
};
|