116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Database, Layout, Cog, Settings, Palette, Monitor } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface ToolbarButton {
|
|
id: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
shortcut: string;
|
|
group: "source" | "editor";
|
|
panelWidth: number;
|
|
}
|
|
|
|
interface LeftUnifiedToolbarProps {
|
|
buttons: ToolbarButton[];
|
|
panelStates: Record<string, { isOpen: boolean }>;
|
|
onTogglePanel: (panelId: string) => void;
|
|
}
|
|
|
|
export const LeftUnifiedToolbar: React.FC<LeftUnifiedToolbarProps> = ({ buttons, panelStates, onTogglePanel }) => {
|
|
// 그룹별로 버튼 분류
|
|
const sourceButtons = buttons.filter((btn) => btn.group === "source");
|
|
const editorButtons = buttons.filter((btn) => btn.group === "editor");
|
|
|
|
const renderButton = (button: ToolbarButton) => {
|
|
const isActive = panelStates[button.id]?.isOpen || false;
|
|
|
|
return (
|
|
<Button
|
|
key={button.id}
|
|
variant="ghost"
|
|
onClick={() => onTogglePanel(button.id)}
|
|
title={`${button.label} (${button.shortcut})`}
|
|
className={cn(
|
|
"flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-lg transition-all duration-200",
|
|
isActive
|
|
? "bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg hover:from-blue-600 hover:to-blue-700"
|
|
: "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
|
|
)}
|
|
>
|
|
<div className="relative">
|
|
{button.icon}
|
|
{isActive && <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-white" />}
|
|
</div>
|
|
<span className="text-[10px] font-medium">{button.label}</span>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full w-[60px] flex-col border-r border-slate-200 bg-white">
|
|
{/* 입력/소스 그룹 */}
|
|
<div className="flex flex-col gap-1 border-b border-slate-200 p-1">{sourceButtons.map(renderButton)}</div>
|
|
|
|
{/* 편집/설정 그룹 */}
|
|
<div className="flex flex-col gap-1 p-1">{editorButtons.map(renderButton)}</div>
|
|
|
|
{/* 하단 여백 */}
|
|
<div className="flex-1" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 기본 버튼 설정
|
|
export const defaultToolbarButtons: ToolbarButton[] = [
|
|
// 입력/소스 그룹
|
|
{
|
|
id: "tables",
|
|
label: "테이블",
|
|
icon: <Database className="h-5 w-5" />,
|
|
shortcut: "T",
|
|
group: "source",
|
|
panelWidth: 380,
|
|
},
|
|
{
|
|
id: "components",
|
|
label: "컴포넌트",
|
|
icon: <Cog className="h-5 w-5" />,
|
|
shortcut: "C",
|
|
group: "source",
|
|
panelWidth: 350,
|
|
},
|
|
|
|
// 편집/설정 그룹
|
|
{
|
|
id: "properties",
|
|
label: "속성",
|
|
icon: <Settings className="h-5 w-5" />,
|
|
shortcut: "P",
|
|
group: "editor",
|
|
panelWidth: 400,
|
|
},
|
|
{
|
|
id: "styles",
|
|
label: "스타일",
|
|
icon: <Palette className="h-5 w-5" />,
|
|
shortcut: "S",
|
|
group: "editor",
|
|
panelWidth: 360,
|
|
},
|
|
{
|
|
id: "resolution",
|
|
label: "해상도",
|
|
icon: <Monitor className="h-5 w-5" />,
|
|
shortcut: "E",
|
|
group: "editor",
|
|
panelWidth: 300,
|
|
},
|
|
];
|
|
|
|
export default LeftUnifiedToolbar;
|