Spaces:
Running
Running
File size: 3,587 Bytes
5f07a23 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
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: 'selection', icon: MousePointer, label: 'Selection' },
{ id: 'pencil', icon: Pencil, label: 'Pencil' },
// { id: 'pen', icon: PenTool, label: 'Pen' },
{ id: 'eraser', icon: Eraser, label: 'Eraser' },
// { id: 'text', icon: Type, label: 'Text' }
];
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; |