TSM.ID
62 lines
3.4 KiB
TypeScript
62 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { useOmni } from "./OmniSyncProvider";
|
||
|
||
export function OmniToggle({ positionClass = "fixed bottom-6 right-6" }: { positionClass?: string } = {}) {
|
||
const { theme, setTheme, currency, setCurrency, locale, setLocale } = useOmni();
|
||
|
||
return (
|
||
<div className={`${positionClass} z-[9999] group`}>
|
||
{/* Sleek Horizontal Pill (Mac/Vercel style) */}
|
||
<div className="flex items-center gap-3 bg-white/10 dark:bg-[#030008]/80 backdrop-blur-2xl border border-black/10 dark:border-white/10 px-3 py-2 rounded-full shadow-[0_8px_30px_rgba(0,0,0,0.3)] hover:shadow-[0_8px_30px_rgba(0,255,136,0.15)] transition-all duration-500">
|
||
|
||
{/* Theme Toggle (Icon only) */}
|
||
<button
|
||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||
className="flex items-center justify-center w-7 h-7 rounded-full bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
|
||
title={`Switch to ${theme === 'dark' ? 'Light' : 'Dark'} Mode`}
|
||
>
|
||
{theme === 'dark' ? (
|
||
<span className="text-amber-400 text-sm drop-shadow-[0_0_5px_rgba(251,191,36,0.8)]">☀️</span>
|
||
) : (
|
||
<span className="text-fuchsia-600 text-sm drop-shadow-[0_0_5px_rgba(192,38,211,0.8)]">🌙</span>
|
||
)}
|
||
</button>
|
||
|
||
<div className="w-px h-4 bg-black/10 dark:bg-white/10" />
|
||
|
||
{/* Language Toggle (Compact Pill) */}
|
||
<div className="flex bg-black/5 dark:bg-white/5 rounded-full p-0.5">
|
||
<button
|
||
onClick={() => setLocale('id')}
|
||
className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${locale === 'id' ? 'bg-brand text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
|
||
>ID</button>
|
||
<button
|
||
onClick={() => setLocale('en')}
|
||
className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${locale === 'en' ? 'bg-brand text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
|
||
>EN</button>
|
||
</div>
|
||
|
||
<div className="w-px h-4 bg-black/10 dark:bg-white/10" />
|
||
|
||
{/* Currency Toggle (Compact Pill) */}
|
||
<div className="flex bg-black/5 dark:bg-white/5 rounded-full p-0.5">
|
||
<button
|
||
onClick={() => setCurrency('Rp')}
|
||
className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${currency === 'Rp' ? 'bg-blue-400 text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
|
||
>Rp</button>
|
||
<button
|
||
onClick={() => setCurrency('USD')}
|
||
className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${currency === 'USD' ? 'bg-green-400 text-black shadow-sm' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
|
||
>$</button>
|
||
<button
|
||
onClick={() => setCurrency('Crypto')}
|
||
className={`px-2 py-0.5 text-[9px] font-black tracking-widest rounded-full transition-all ${currency === 'Crypto' ? 'bg-fuchsia-500 text-white shadow-[0_0_10px_rgba(217,70,239,0.5)] animate-pulse' : 'text-black/50 dark:text-white/50 hover:text-black dark:hover:text-white'}`}
|
||
>USDT</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|