Hugging Face's logo

Spaces:
Leon4gr45
/
openoperator
Build error

App Files Community
7
openoperator
File size: 3,446 Bytes
75fefa7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
"use client";

import { useEffect, useRef, useState } from "react";
import { cn } from "@/utils/cn";

// Sample of flame frames - using a subset for performance
const flameFrames = [
  `
       ▄▄▄       
      ▄███▄      
     ▄█████▄     
    ▄███████▄    
   ▄█████████▄   
  ▄███████████▄  
 ▄█████████████▄ 
▄███████████████▄
█████████████████
███▀▀▀███▀▀▀█████
██     ███    ███
█       ▀      ██
`,
  `
      ▄███▄      
     ▄█████▄     
    ▄███▀███▄    
   ▄████▄████▄   
  ▄███████████▄  
 ▄█████▀▀██████▄ 
▄██████▄▄███████▄
█████████████████
███▀▀█████▀▀█████
██    ███     ███
█      ▀       ██
                 
`,
  `
     ▄█████▄     
    ▄███████▄    
   ▄█████████▄   
  ▄███▀███▀███▄  
 ▄████▄███▄████▄ 
▄██████████████▄ 
████▀▀█████▀▀████
███    ███    ███
██     ▀▀     ███
█             ██ 
                 
                 
`,
  `
    ▄███████▄    
   ▄█████████▄   
  ▄███████████▄  
 ▄█████▀▀██████▄ 
▄███████▄▄██████▄
██████████████████
████▀▀▀████▀▀▀████
███     ███    ███
██      ▀▀      ██
█               █ 
                  
                  
`,
];

interface HeroFlameProps {
  className?: string;
  size?: "small" | "medium" | "large";
}

export function HeroFlame({ className, size = "medium" }: HeroFlameProps) {
  const [frameIndex, setFrameIndex] = useState(0);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setFrameIndex((prev) => (prev + 1) % flameFrames.length);
    }, 85);

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);

  const sizeClasses = {
    small: "text-[8px] leading-[10px]",
    medium: "text-[12px] leading-[14px]",
    large: "text-[16px] leading-[18px]",
  };

  return (
    <div
      className={cn("flex gap-4 pointer-events-none select-none", className)}
    >
      {/* Left flame */}
      <div className="relative overflow-hidden">
        <pre
          className={cn(
            "text-heat-100 font-mono whitespace-pre",
            sizeClasses[size],
          )}
        >
          {flameFrames[frameIndex]}
        </pre>
      </div>

      {/* Right flame (mirrored) */}
      <div className="relative overflow-hidden -scale-x-100">
        <pre
          className={cn(
            "text-heat-100 font-mono whitespace-pre",
            sizeClasses[size],
          )}
        >
          {flameFrames[frameIndex]}
        </pre>
      </div>
    </div>
  );
}