|
|
import React from 'react';
|
|
|
import { Button, CircularProgress, Tooltip } from '@mui/material';
|
|
|
import GifIcon from '@mui/icons-material/Gif';
|
|
|
|
|
|
interface DownloadGifButtonProps {
|
|
|
isGenerating: boolean;
|
|
|
onClick: () => void;
|
|
|
disabled?: boolean;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const DownloadGifButton: React.FC<DownloadGifButtonProps> = ({
|
|
|
isGenerating,
|
|
|
onClick,
|
|
|
disabled = false,
|
|
|
}) => {
|
|
|
return (
|
|
|
<Tooltip
|
|
|
title={
|
|
|
disabled
|
|
|
? "No steps available"
|
|
|
: "Download GIF replay"
|
|
|
}
|
|
|
>
|
|
|
<span>
|
|
|
<Button
|
|
|
variant="outlined"
|
|
|
size="small"
|
|
|
onClick={onClick}
|
|
|
disabled={disabled || isGenerating}
|
|
|
startIcon={
|
|
|
isGenerating ? (
|
|
|
<CircularProgress size={16} />
|
|
|
) : (
|
|
|
<GifIcon sx={{ fontSize: '1.2rem' }} />
|
|
|
)
|
|
|
}
|
|
|
sx={{
|
|
|
textTransform: 'none',
|
|
|
fontSize: '0.75rem',
|
|
|
fontWeight: 600,
|
|
|
borderRadius: 1,
|
|
|
px: 1.5,
|
|
|
py: 0.5,
|
|
|
borderColor: 'divider',
|
|
|
color: 'text.primary',
|
|
|
'&:hover': {
|
|
|
borderColor: 'primary.main',
|
|
|
backgroundColor: 'action.hover',
|
|
|
},
|
|
|
'&.Mui-disabled': {
|
|
|
borderColor: 'divider',
|
|
|
color: 'text.disabled',
|
|
|
},
|
|
|
}}
|
|
|
>
|
|
|
{isGenerating ? 'Generating...' : 'Download GIF'}
|
|
|
</Button>
|
|
|
</span>
|
|
|
</Tooltip>
|
|
|
);
|
|
|
};
|
|
|
|
