feat(toolbar): resolved merge conflicts

Author: Shreyanshi210205

client/src/components/Toolbar.jsx

@@ -9,6 +9,7 @@ import {
   Download,
   FileImage,
   FileType,
+  Brush,
 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./ui/Button";
@@ -23,8 +24,6 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
     { type: "rectangle", icon: Square },
     { type: "circle", icon: Circle },
     { type: "line", icon: Minus },
-<<<<<<< Updated upstream
-=======
 
   ];
 
@@ -66,7 +65,6 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
         <div className="w-10 h-2 bg-gradient-to-r from-yellow-400 via-red-400 to-purple-400 rounded-full blur-[0.5px] opacity-90"></div>
       ),
     },
->>>>>>> Stashed changes
   ];
 
   return (
@@ -81,7 +79,7 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
               size="icon"
               onClick={() => onToolChange(tool.type)}
               className={cn(
-                "h-10 w-10 transition-all duration-200 hover:bg-secondary",
+                "h-10 w-10 transition-all duration-200 hover:bg-secondary active:scale-95",
                 activeTool === tool.type
                   ? "bg-primary text-primary-foreground ring-2 ring-offset-2 ring-primary"
                   : ""
@@ -94,12 +92,41 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
         })}
 
         <Separator orientation="vertical" className="h-8 mx-1" />
+        <DropdownMenu
+          trigger={
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                "h-10 w-10 transition-all duration-200 hover:bg-secondary active:scale-95",
+                activeTool.startsWith("brush-")
+                  ? "bg-primary text-primary-foreground ring-2 ring-offset-2 ring-primary"
+                  : ""
+              )}
+              aria-label="Brush tool"
+            >
+              <Brush className="h-5 w-5" />
+            </Button>
+          }
+        >
+          {brushTypes.map((brush) => (
+            <DropdownMenuItem
+              key={brush.id}
+              onClick={() => onToolChange(`brush-${brush.id}`)}
+              className="flex items-center gap-3 cursor-pointer hover:bg-gray-100 rounded-md px-2 py-1"
+            >
+              {brush.preview}
+              <span className="capitalize">{brush.label}</span>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenu>
 
+        <Separator orientation="vertical" className="h-8 mx-1" />
         <Button
           variant="ghost"
           size="icon"
           onClick={onClear}
-          className="h-10 w-10 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive"
+          className="h-10 w-10 transition-all duration-200 hover:bg-destructive/10 hover:text-destructive active:scale-95"
           aria-label="Clear canvas"
         >
           <Trash2 className="h-5 w-5" />
@@ -112,7 +139,7 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
             <Button
               variant="ghost"
               size="icon"
-              className="h-10 w-10 transition-all duration-200 hover:bg-secondary"
+              className="h-10 w-10 transition-all duration-200 hover:bg-secondary active:scale-95"
               aria-label="Export canvas"
             >
               <Download className="h-5 w-5" />
@@ -135,4 +162,4 @@ export const Toolbar = ({ activeTool, onToolChange, onClear, onExport }) => {
       </div>
     </div>
   );
-};
+};