[TSM.ID].[11031972] PXE : Platform X Ecosystem I [118 Module -LIVE-]
This commit is contained in:
TSM.ID
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
|
||||
type Theme = 'dark' | 'light';
|
||||
type Currency = 'Rp' | 'USD' | 'Crypto';
|
||||
type Locale = 'id' | 'en';
|
||||
|
||||
interface OmniContextProps {
|
||||
theme: Theme;
|
||||
setTheme: (t: Theme) => void;
|
||||
currency: Currency;
|
||||
setCurrency: (c: Currency) => void;
|
||||
locale: Locale;
|
||||
setLocale: (l: Locale) => void;
|
||||
formatCurrency: (amountInIDR: number) => string;
|
||||
}
|
||||
|
||||
const OmniContext = createContext<OmniContextProps | null>(null);
|
||||
|
||||
export const useOmni = () => {
|
||||
const ctx = useContext(OmniContext);
|
||||
if (!ctx) throw new Error("useOmni must be used within OmniSyncProvider");
|
||||
return ctx;
|
||||
};
|
||||
|
||||
export function OmniSyncProvider({ children, initialLocale }: { children: React.ReactNode, initialLocale: Locale }) {
|
||||
const [theme, setThemeState] = useState<Theme>('dark');
|
||||
const [currency, setCurrencyState] = useState<Currency>('Rp');
|
||||
const [locale, setLocaleState] = useState<Locale>(initialLocale);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
// Use a ref for the broadcast channel to avoid mutating variables in useEffect
|
||||
const channelRef = React.useRef<BroadcastChannel | null>(null);
|
||||
|
||||
const setCookie = (name: string, value: string) => {
|
||||
const host = window.location.hostname;
|
||||
const cookieDomain = process.env.NEXT_PUBLIC_COOKIE_DOMAIN || (host === 'localhost' || host === '127.0.0.1' ? host : `.${host}`);
|
||||
document.cookie = `${name}=${value}; path=/; domain=${cookieDomain}; max-age=31536000`;
|
||||
if (window.location.hostname === 'localhost') {
|
||||
document.cookie = `${name}=${value}; path=/; max-age=31536000`;
|
||||
}
|
||||
};
|
||||
|
||||
const getCookie = (name: string) => {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop()?.split(';').shift();
|
||||
return null;
|
||||
};
|
||||
|
||||
const setTheme = (t: Theme) => {
|
||||
setThemeState(t);
|
||||
setCookie('omni_theme', t);
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
if (channelRef.current) channelRef.current.postMessage({ type: 'SYNC_THEME', payload: t });
|
||||
};
|
||||
|
||||
const setCurrency = (c: Currency) => {
|
||||
setCurrencyState(c);
|
||||
setCookie('omni_currency', c);
|
||||
if (channelRef.current) channelRef.current.postMessage({ type: 'SYNC_CURRENCY', payload: c });
|
||||
};
|
||||
|
||||
const setLocale = (l: Locale) => {
|
||||
setLocaleState(l);
|
||||
setCookie('NEXT_LOCALE', l);
|
||||
if (channelRef.current) channelRef.current.postMessage({ type: 'SYNC_LOCALE', payload: l });
|
||||
router.refresh();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Client-side initialization
|
||||
const savedTheme = getCookie('omni_theme') as Theme;
|
||||
if (savedTheme) {
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
if (theme !== savedTheme) {
|
||||
queueMicrotask(() => setThemeState(savedTheme));
|
||||
}
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
|
||||
const savedCurrency = getCookie('omni_currency') as Currency;
|
||||
if (savedCurrency && currency !== savedCurrency) {
|
||||
queueMicrotask(() => setCurrencyState(savedCurrency));
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined' && !channelRef.current) {
|
||||
channelRef.current = new BroadcastChannel('omni_sync_channel');
|
||||
}
|
||||
|
||||
const channel = channelRef.current;
|
||||
if (channel) {
|
||||
channel.onmessage = (event: MessageEvent) => {
|
||||
const { type, payload } = event.data;
|
||||
if (type === 'SYNC_THEME') {
|
||||
setThemeState(payload);
|
||||
document.documentElement.setAttribute('data-theme', payload);
|
||||
}
|
||||
if (type === 'SYNC_CURRENCY') {
|
||||
setCurrencyState(payload);
|
||||
}
|
||||
if (type === 'SYNC_LOCALE') {
|
||||
setLocaleState(payload);
|
||||
if (pathname) {
|
||||
router.refresh();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (channel) channel.close();
|
||||
channelRef.current = null;
|
||||
};
|
||||
}, [pathname, router, currency, theme]);
|
||||
|
||||
const formatCurrency = (amountInIDR: number): string => {
|
||||
// Quantum Conversion Matrix
|
||||
const rates = {
|
||||
Rp: 1,
|
||||
USD: 1 / 16000,
|
||||
Crypto: 1 / 1000000000 // 1 BTC = 1B IDR approx
|
||||
};
|
||||
|
||||
const value = amountInIDR * rates[currency];
|
||||
|
||||
if (currency === 'Crypto') {
|
||||
return `₿ ${value.toFixed(8)}`;
|
||||
}
|
||||
|
||||
return new Intl.NumberFormat(locale === 'id' ? 'id-ID' : 'en-US', {
|
||||
style: 'currency',
|
||||
currency: currency === 'Rp' ? 'IDR' : 'USD',
|
||||
minimumFractionDigits: currency === 'Rp' ? 0 : 2
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<OmniContext.Provider value={{ theme, setTheme, currency, setCurrency, locale, setLocale, formatCurrency }}>
|
||||
{children}
|
||||
</OmniContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user