Spaces:
Running
Running
File size: 2,257 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 |
import { Brush, Download, History, RefreshCw } from 'lucide-react';
import { useState } from 'react';
// Mini component for consistent button styling
const ActionButton = ({ icon: Icon, label, onClick, disabled, ariaLabel, onMouseEnter, onMouseLeave }) => {
return (
<button
type="button"
onClick={onClick}
disabled={disabled}
className="focus:outline-none group relative flex-shrink-0"
aria-label={ariaLabel}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div className={`w-16 md:w-14 border overflow-hidden rounded-lg ${
disabled
? 'bg-gray-50 border-gray-200 opacity-50 cursor-not-allowed'
: 'bg-gray-50 border-gray-200 group-hover:bg-white group-hover:border-gray-300 transition-colors'
}`}>
{/* Icon container */}
<div className="w-full relative flex items-center justify-center py-3 md:py-2">
<Icon className={`w-5 h-5 ${
disabled
? 'text-gray-400'
: 'text-gray-400 group-hover:text-gray-700 transition-colors'
}`} />
</div>
</div>
</button>
);
};
const OutputOptionsBar = ({
isLoading,
hasGeneratedContent,
onSendToDoodle,
}) => {
const [showDoodleTooltip, setShowDoodleTooltip] = useState(false);
return (
<div className="flex items-center gap-2">
{/* "Send to Doodle" button with tooltip */}
<div className="relative">
<ActionButton
icon={Brush}
label="Doodle"
onClick={onSendToDoodle}
disabled={isLoading || !hasGeneratedContent}
ariaLabel="Send image back to doodle canvas"
onMouseEnter={() => setShowDoodleTooltip(true)}
onMouseLeave={() => setShowDoodleTooltip(false)}
/>
{/* Custom Tooltip - Right aligned */}
{showDoodleTooltip && (
<div className="absolute bottom-full right-0 mb-2 px-3 py-1.5 bg-white border border-gray-200 text-gray-700 text-xs rounded-lg shadow-soft whitespace-nowrap pointer-events-none z-10">
Send to Doodle Canvas
</div>
)}
</div>
</div>
);
};
export default OutputOptionsBar; |