LanguageSwitcher

languageswitcher-1779394643362.tsx

'use client'
import { useState } from 'react'

const LANGS = [
  { code:'en', label:'English', flag:'🇬🇧' },
  { code:'fr', label:'Français', flag:'🇫🇷' },
  { code:'de', label:'Deutsch', flag:'🇩🇪' },
  { code:'es', label:'Español', flag:'🇪🇸' },
  { code:'ja', label:'日本語', flag:'🇯🇵' },
  { code:'zh', label:'中文', flag:'🇨🇳' },
]

export default function LanguageSwitcher({ languages = LANGS }) {
  const [selected, setSelected] = useState(languages[0])
  const [open, setOpen] = useState(false)
  return (
    <div style={{ position:'relative', display:'inline-block' }}>
      <button onClick={()=>setOpen(!open)} style={{
        display:'flex', alignItems:'center', gap:'8px',
        background:'#fff', border:'2px solid #e2e8f0', borderRadius:'10px',
        padding:'8px 14px', cursor:'pointer', fontSize:'14px', fontWeight:600, color:'#374151',
      }}>
        <span style={{ fontSize:'20px' }}>{selected.flag}</span>
        {selected.label}
        <span style={{ color:'#94a3b8', fontSize:'12px', transition:'transform 0.2s', transform:open?'rotate(180deg)':'none', display:'inline-block' }}>▾</span>
      </button>
      {open && (
        <div style={{
          position:'absolute', top:'calc(100%+6px)', left:0,
          background:'#fff', border:'1px solid #e2e8f0', borderRadius:'12px',
          boxShadow:'0 8px 30px rgba(0,0,0,0.1)', zIndex:100, overflow:'hidden', minWidth:'160px',
          animation:'drop 0.15s ease',
        }}>
          <style>{'@keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}'}</style>
          {languages.map(lang => (
            <div key={lang.code} onClick={()=>{setSelected(lang);setOpen(false)}} style={{
              display:'flex', alignItems:'center', gap:'10px', padding:'10px 14px',
              cursor:'pointer', fontSize:'14px', fontWeight:selected.code===lang.code?700:400,
              color:selected.code===lang.code?'#6d28d9':'#374151',
              background:selected.code===lang.code?'#faf5ff':'transparent',
              transition:'background 0.1s',
            }}
              onMouseEnter={e=>e.currentTarget.style.background=selected.code===lang.code?'#faf5ff':'#f8fafc'}
              onMouseLeave={e=>e.currentTarget.style.background=selected.code===lang.code?'#faf5ff':'transparent'}
            >
              <span style={{ fontSize:'20px' }}>{lang.flag}</span>
              {lang.label}
              {selected.code===lang.code && <span style={{ marginLeft:'auto', color:'#6d28d9' }}>✓</span>}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Language/locale switcher dropdown with flag emojis

More from Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility