diff --git a/src/components/features/ToolbarButton.tsx b/src/components/features/ToolbarButton.tsx index 33fff63f6a..4a39a2b043 100644 --- a/src/components/features/ToolbarButton.tsx +++ b/src/components/features/ToolbarButton.tsx @@ -14,12 +14,14 @@ export interface ToolbarButtonProps } export const ToolbarButton = ({ + children, icon, tooltip, onClick, buttonProps = {}, iconProps, }: { + children?: React.ReactNode; icon: IconDefinition; tooltip?: string; onClick?: MouseEventHandler; @@ -34,7 +36,8 @@ export const ToolbarButton = ({ ...restButtonProps } = buttonProps; const mergedButtonClasses = twMerge( - "size-10 rounded-2xl p-2 hover:bg-secondary-500 hover:text-white", + "rounded-2xl p-2 hover:bg-secondary-500 hover:text-white", + children ? "w-fit flex items-center gap-2 text-nowrap" : "size-10", disabled && "pointer-events-none text-secondary-300", active && "pointer-events-none text-primary ", customButtonClassNames, @@ -45,9 +48,18 @@ export const ToolbarButton = ({ className={mergedButtonClasses} disabled={disabled} {...restButtonProps} - onClick={onClick ? onClick : customOnClick} + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + if (onClick) { + onClick(e); + } else if (customOnClick) { + customOnClick(e); + } + }} > + {children} ); if (tooltip) { diff --git a/src/components/features/ToolbarMain/index.tsx b/src/components/features/ToolbarMain/index.tsx index 3b1b7fe783..cace44f629 100644 --- a/src/components/features/ToolbarMain/index.tsx +++ b/src/components/features/ToolbarMain/index.tsx @@ -89,10 +89,12 @@ export const ToolbarMain = ({ icon={faLocationArrow} iconProps={{ className: "fa-flip-horizontal" }} buttonProps={buttonProps.SELECT_ONE} + tooltip="Select" />
@@ -117,7 +119,9 @@ export const ToolbarMain = ({ isUploadVideoOpen: false, }) } - /> + > + Add Image + @@ -127,30 +131,44 @@ export const ToolbarMain = ({ isUploadImageOpen: false, }) } - /> + > + Add Video +
)}
+ + - -