Website Builder Frontend - TSX
Website Builder Frontend - TSX
import { Edit, Globe, Share2, Save, Plus, Layout, Image, Type, Button as ButtonIcon
} from 'lucide-react';
return (
<div className="min-h-screen bg-gray-50">
{/* Toolbar */}
<div className="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
<div className="max-w-7xl mx-auto px-4 py-2 flex items-center justify-
between">
<div className="flex items-center space-x-4">
<button
onClick={() => addSection('heading')}
className="flex items-center px-3 py-2 bg-blue-600 text-white
rounded-md hover:bg-blue-700"
>
<Type className="w-4 h-4 mr-2" />
Add Heading
</button>
<button
onClick={() => addSection('text')}
className="flex items-center px-3 py-2 bg-blue-600 text-white
rounded-md hover:bg-blue-700"
>
<Edit className="w-4 h-4 mr-2" />
Add Text
</button>
<button
onClick={() => addSection('image')}
className="flex items-center px-3 py-2 bg-blue-600 text-white
rounded-md hover:bg-blue-700"
>
<Image className="w-4 h-4 mr-2" />
Add Image
</button>
<button
onClick={() => addSection('button')}
className="flex items-center px-3 py-2 bg-blue-600 text-white
rounded-md hover:bg-blue-700"
>
<ButtonIcon className="w-4 h-4 mr-2" />
Add Button
</button>
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setShowPublishModal(true)}
className="flex items-center px-4 py-2 bg-green-600 text-white
rounded-md hover:bg-green-700"
>
<Globe className="w-4 h-4 mr-2" />
Publish
</button>
</div>
</div>
</div>