Hugging Face's logo

Spaces:
Trudy
/
gemini-3d-drawing
Running

App Files Community
gemini-3d-drawing
File size: 2,728 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
 
import { Download, RefreshCw, History } from 'lucide-react';

const ActionBar = ({ handleSaveImage, handleRegenerate, onOpenHistory, hasGeneratedContent = false }) => {
  return (
    <div className="fixed bottom-4 right-4 flex gap-2">
      <button
        type="button"
        onClick={handleRegenerate}
        disabled={!hasGeneratedContent}
        className={`group flex flex-col w-20 border border-gray-200 overflow-hidden rounded-xl transition-colors bg-gray-50 ${
          hasGeneratedContent
            ? 'hover:border-gray-300 hover:bg-white'
            : 'opacity-50 cursor-not-allowed'
        }`}
        aria-label="Regenerate"
      >
        <div className="w-full relative flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
          <RefreshCw className={`w-6 h-6 text-gray-400 ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`} />
        </div>
        <div className={`px-1 py-1 text-center text-xs font-medium text-gray-400 w-full ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`}>
          <div className="truncate">Regenerate</div>
        </div>
      </button>

      <button
        type="button"
        onClick={onOpenHistory}
        className="group flex flex-col w-20 border border-gray-200 overflow-hidden rounded-xl transition-colors bg-gray-50 hover:border-gray-300 hover:bg-white"
        aria-label="View History"
      >
        <div className="w-full relative flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
          <History className="w-6 h-6 text-gray-400 group-hover:text-gray-600" />
        </div>
        <div className="px-1 py-1 text-center text-xs font-medium text-gray-400 w-full group-hover:text-gray-600">
          <div className="truncate">History</div>
        </div>
      </button>

      <button
        type="button"
        onClick={handleSaveImage}
        disabled={!hasGeneratedContent}
        className={`group flex flex-col w-20 border border-gray-200 overflow-hidden rounded-xl transition-colors bg-gray-50 ${
          hasGeneratedContent
            ? 'hover:border-gray-300 hover:bg-white'
            : 'opacity-50 cursor-not-allowed'
        }`}
        aria-label="Save Image"
      >
        <div className="w-full relative flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
          <Download className={`w-6 h-6 text-gray-400 ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`} />
        </div>
        <div className={`px-1 py-1 text-center text-xs font-medium text-gray-400 w-full ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`}>
          <div className="truncate">Save</div>
        </div>
      </button>
    </div>
  );
};

export default ActionBar;