101 lines
4.7 KiB
TypeScript
101 lines
4.7 KiB
TypeScript
import React from 'react';
|
|
import { MousePointer2, Square, MoveRight, Type, Download, Trash2, ImagePlus, Copy } from 'lucide-react';
|
|
import { ToolType } from '../types';
|
|
|
|
interface ToolbarProps {
|
|
currentTool: ToolType;
|
|
setTool: (tool: ToolType) => void;
|
|
onExport: () => void;
|
|
onCopy: () => void;
|
|
onClear: () => void;
|
|
hasImage: boolean;
|
|
onDeleteSelected: () => void;
|
|
hasSelection: boolean;
|
|
}
|
|
|
|
const Toolbar: React.FC<ToolbarProps> = ({
|
|
currentTool,
|
|
setTool,
|
|
onExport,
|
|
onCopy,
|
|
onClear,
|
|
hasImage,
|
|
onDeleteSelected,
|
|
hasSelection,
|
|
}) => {
|
|
const tools = [
|
|
{ id: 'select', icon: MousePointer2, label: 'Select' },
|
|
{ id: 'rect', icon: Square, label: 'Box' },
|
|
{ id: 'arrow', icon: MoveRight, label: 'Arrow' },
|
|
{ id: 'text', icon: Type, label: 'Text' },
|
|
] as const;
|
|
|
|
return (
|
|
<div className="bg-amber-100 border-r-4 border-amber-900 w-20 flex flex-col items-center py-6 gap-4 z-20 shrink-0">
|
|
<div className="flex flex-col gap-3 w-full px-2">
|
|
{tools.map((tool) => (
|
|
<button
|
|
key={tool.id}
|
|
onClick={() => setTool(tool.id)}
|
|
className={`p-3 rounded-none border-2 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none ${
|
|
currentTool === tool.id
|
|
? 'bg-cyan-400 border-black text-black'
|
|
: 'bg-white border-amber-900 text-amber-900 hover:bg-amber-50'
|
|
}`}
|
|
title={tool.label}
|
|
>
|
|
<tool.icon size={24} strokeWidth={2.5} />
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="h-1 w-12 bg-amber-900/20 my-2 rounded-full" />
|
|
|
|
<div className="flex flex-col gap-3 w-full px-2">
|
|
<button
|
|
onClick={onDeleteSelected}
|
|
disabled={!hasSelection}
|
|
className={`p-3 border-2 rounded-none transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(190,24,93,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(190,24,93,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none ${
|
|
!hasSelection
|
|
? 'bg-gray-100 border-gray-400 text-gray-400 cursor-not-allowed shadow-none'
|
|
: 'bg-pink-400 border-black text-black hover:bg-pink-300'
|
|
}`}
|
|
title="Delete Selected"
|
|
>
|
|
<Trash2 size={24} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onClear}
|
|
disabled={!hasImage}
|
|
className="p-3 border-2 rounded-none bg-white border-amber-900 text-amber-900 hover:bg-red-50 hover:text-red-700 hover:border-red-700 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
|
|
title="Clear All"
|
|
>
|
|
<ImagePlus size={24} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
<div className="mt-auto flex flex-col gap-3 w-full">
|
|
<button
|
|
onClick={onCopy}
|
|
disabled={!hasImage}
|
|
className="p-3 border-2 rounded-none bg-violet-400 border-black text-black hover:bg-violet-300 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
|
|
title="Copy to Clipboard"
|
|
>
|
|
<Copy size={24} strokeWidth={2.5} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onExport}
|
|
disabled={!hasImage}
|
|
className="p-3 border-2 rounded-none bg-lime-400 border-black text-black hover:bg-lime-300 transition-all duration-200 flex flex-col items-center justify-center group relative shadow-[4px_4px_0px_0px_rgba(69,26,3,0.3)] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[3px_3px_0px_0px_rgba(69,26,3,0.3)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
|
|
title="Export PNG"
|
|
>
|
|
<Download size={24} strokeWidth={2.5} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Toolbar; |