|
import { Pencil, Eraser, Type, Undo, Trash2, PenLine, MousePointer } from 'lucide-react'; |
|
import { PenTool } from 'lucide-react'; |
|
import { Undo2 } from 'lucide-react'; |
|
import { useState } from 'react'; |
|
import DimensionSelector from './DimensionSelector'; |
|
|
|
const ToolBar = ({ |
|
currentTool, |
|
setCurrentTool, |
|
handleUndo, |
|
clearCanvas, |
|
orientation = 'horizontal', |
|
currentWidth, |
|
setStrokeWidth, |
|
currentDimension, |
|
onDimensionChange |
|
}) => { |
|
const mainTools = [ |
|
|
|
{ id: 'pencil', icon: Pencil, label: 'Pencil' }, |
|
|
|
{ id: 'eraser', icon: Eraser, label: 'Eraser' }, |
|
|
|
]; |
|
|
|
const actions = [ |
|
{ id: 'undo', icon: Undo2, label: 'Undo', onClick: handleUndo }, |
|
{ id: 'clear', icon: Trash2, label: 'Clear', onClick: clearCanvas } |
|
]; |
|
|
|
const containerClasses = orientation === 'vertical' |
|
? 'flex flex-col gap-2 bg-white rounded-xl shadow-soft p-2 border border-gray-200' |
|
: 'flex gap-2 bg-white rounded-xl shadow-soft p-2 border border-gray-200'; |
|
|
|
return ( |
|
<div className={orientation === 'vertical' ? 'flex flex-col gap-2' : 'flex flex-col gap-3 mt-1'}> |
|
{/* Main toolbar container - includes dimension selector in horizontal mode */} |
|
<div className={orientation === 'horizontal' ? 'flex items-center justify-between' : ''}> |
|
{/* Main toolbar */} |
|
<div className={containerClasses}> |
|
{mainTools.map((tool) => ( |
|
<div key={tool.id} className="relative"> |
|
<button |
|
onClick={() => setCurrentTool(tool.id)} |
|
className={`p-2.5 rounded-lg transition-colors flex items-center justify-center ${ |
|
currentTool === tool.id |
|
? 'bg-gray-100 text-gray-900' |
|
: 'text-gray-600 hover:bg-gray-50' |
|
}`} |
|
title={tool.label} |
|
> |
|
<tool.icon className="w-5 h-5" /> |
|
</button> |
|
</div> |
|
))} |
|
|
|
{orientation === 'vertical' && <div className="h-px bg-gray-200 my-2" />} |
|
{orientation === 'horizontal' && <div className="w-px bg-gray-200 mx-0" />} |
|
|
|
{actions.map((action) => ( |
|
<button |
|
key={action.id} |
|
onClick={action.onClick} |
|
className="p-2 rounded-lg text-gray-600 hover:bg-gray-50 text-center flex items-center justify-center transition-colors" |
|
title={action.label} |
|
> |
|
<action.icon className="w-5 h-5" /> |
|
</button> |
|
))} |
|
</div> |
|
|
|
{/* Dimension selector - show inline in horizontal layout */} |
|
{orientation === 'horizontal' && currentDimension && onDimensionChange && ( |
|
<div className="ml-2 bg-white rounded-xl shadow-soft p-2 border border-gray-200"> |
|
<DimensionSelector |
|
currentDimension={currentDimension} |
|
onDimensionChange={onDimensionChange} |
|
/> |
|
</div> |
|
)} |
|
</div> |
|
|
|
{/* Separate DimensionSelector - only in vertical orientation */} |
|
{orientation === 'vertical' && currentDimension && onDimensionChange && ( |
|
<div className="bg-white rounded-xl shadow-soft border border-gray-200"> |
|
<DimensionSelector |
|
currentDimension={currentDimension} |
|
onDimensionChange={onDimensionChange} |
|
/> |
|
</div> |
|
)} |
|
</div> |
|
); |
|
}; |
|
|
|
export default ToolBar; |