Spaces:
Sleeping
Sleeping
File size: 2,777 Bytes
4be2b2b |
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 |
import { Languages } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useLanguage } from '@/contexts/LanguageContext';
import { cn } from '@/lib/utils';
export function LanguageToggle({ className }: { className?: string }) {
const { language, toggleLanguage } = useLanguage();
return (
<Button
variant="ghost"
size="sm"
onClick={toggleLanguage}
className={cn(
"h-10 w-auto px-3 gap-2",
"hover:bg-accent",
"active:scale-95 transition-transform",
"touch-manipulation",
className
)}
title={language === 'mr' ? 'Switch to English' : 'मराठी मध्ये बदला'}
>
<Languages className="h-4 w-4" />
<span className="font-semibold text-sm">
{language === 'mr' ? 'अ' : 'A'}
</span>
<span className="text-xs text-muted-foreground hidden sm:inline">
{language === 'mr' ? 'English' : 'मराठी'}
</span>
</Button>
);
}
// Alternative toggle switch version
export function LanguageToggleSwitch({ className }: { className?: string }) {
const { language, toggleLanguage } = useLanguage();
return (
<button
onClick={toggleLanguage}
className={cn(
"relative inline-flex items-center gap-2",
"h-10 px-3 rounded-lg",
"bg-muted hover:bg-muted/80",
"active:scale-95 transition-all",
"touch-manipulation",
className
)}
title={language === 'mr' ? 'Switch to English' : 'मराठी मध्ये बदला'}
>
<Languages className="h-4 w-4 text-muted-foreground" />
<div className="flex items-center gap-1">
<span className={cn(
"text-xs font-semibold px-2 py-1 rounded transition-all",
language === 'en' && "bg-primary text-primary-foreground"
)}>
EN
</span>
<span className={cn(
"text-xs font-semibold px-2 py-1 rounded transition-all",
language === 'mr' && "bg-primary text-primary-foreground"
)}>
मर
</span>
</div>
</button>
);
}
// Compact version for mobile
export function LanguageToggleCompact() {
const { language, toggleLanguage } = useLanguage();
return (
<button
onClick={toggleLanguage}
className={cn(
"flex items-center justify-center",
"h-9 w-9 rounded-full",
"bg-muted hover:bg-muted/80",
"active:scale-90 transition-all",
"touch-manipulation"
)}
title={language === 'mr' ? 'Switch to English' : 'मराठी मध्ये बदला'}
>
<span className="text-sm font-bold">
{language === 'mr' ? 'अ' : 'A'}
</span>
</button>
);
}
|