- Migrate from tailwindcss v3.3 to v4.1.18 - Replace @tailwind directives with @import 'tailwindcss' - Move custom colors to @theme block in globals.css - Convert custom utilities to @utility syntax - Update PostCSS config to use @tailwindcss/postcss - Remove autoprefixer (now built-in)
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { useI18n } from '@/i18n/I18nContext';
|
|
|
|
const LanguageSwitcher = () => {
|
|
const { locale, setLocale } = useI18n();
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setLocale('de')}
|
|
className={`p-1.5 rounded-lg transition-all ${locale === 'de'
|
|
? 'bg-orange-950/30 scale-110 shadow-xs shadow-orange-950/20'
|
|
: 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
|
|
}`}
|
|
title="Deutsch"
|
|
>
|
|
<span className="text-lg">🇩🇪</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setLocale('en')}
|
|
className={`p-1.5 rounded-lg transition-all ${locale === 'en'
|
|
? 'bg-orange-950/30 scale-110 shadow-xs shadow-orange-950/20'
|
|
: 'opacity-50 hover:opacity-100 grayscale hover:grayscale-0'
|
|
}`}
|
|
title="English"
|
|
>
|
|
<span className="text-lg">🇬🇧</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LanguageSwitcher;
|