Hugging Face's logo

Spaces:
arshia-a1
/
quantumneon-devhub
Running

App Files Community
quantumneon-devhub
File size: 3,602 Bytes
a8624fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
class LanguageSwitcher extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
          position: relative;
        }
        
        .language-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 9999px;
          padding: 0.5rem 1rem;
          color: white;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .language-btn:hover {
          background: rgba(255, 255, 255, 0.2);
        }
        
        .dropdown {
          position: absolute;
          right: 0;
          top: calc(100% + 0.5rem);
          background: rgba(30, 41, 59, 0.95);
          border-radius: 0.75rem;
          padding: 0.5rem 0;
          min-width: 160px;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          opacity: 0;
          visibility: hidden;
          transform: translateY(10px);
          transition: all 0.3s ease;
          z-index: 100;
        }
        
        :host([open]) .dropdown {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
        
        .language-option {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.75rem 1.5rem;
          color: rgba(255, 255, 255, 0.8);
          cursor: pointer;
          transition: all 0.2s ease;
        }
        
        .language-option:hover {
          background: rgba(79, 70, 229, 0.2);
          color: white;
        }
        
        .language-flag {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          object-fit: cover;
        }
      </style>
      
      <div class="language-btn" id="toggleBtn">
        <img src="/flags/${this.getAttribute('current')}.svg" class="language-flag" alt="Current language">
        <span>${this.getAttribute('current').toUpperCase()}</span>
        <i data-feather="chevron-down" width="16" height="16"></i>
      </div>
      
      <div class="dropdown">
        <div class="language-option" data-lang="en">
          <img src="/flags/en.svg" class="language-flag" alt="English">
          <span>English</span>
        </div>
        <div class="language-option" data-lang="de">
          <img src="/flags/de.svg" class="language-flag" alt="Deutsch">
          <span>Deutsch</span>
        </div>
        <div class="language-option" data-lang="fa">
          <img src="/flags/fa.svg" class="language-flag" alt="فارسی">
          <span>فارسی</span>
        </div>
      </div>
    `;

    const toggleBtn = this.shadowRoot.getElementById('toggleBtn');
    toggleBtn.addEventListener('click', () => {
      this.toggleAttribute('open');
    });

    const options = this.shadowRoot.querySelectorAll('.language-option');
    options.forEach(option => {
      option.addEventListener('click', () => {
        const lang = option.getAttribute('data-lang');
        this.setAttribute('current', lang);
        this.removeAttribute('open');
        this.dispatchEvent(new CustomEvent('language-change', { 
          detail: { language: lang },
          bubbles: true,
          composed: true 
        }));
      });
    });
  }
}

customElements.define('language-switcher', LanguageSwitcher);