59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export function CurrencyToggle() {
|
|
const [currency, setCurrency] = useState<"USD" | "CAD">("USD");
|
|
|
|
const toggle = () => {
|
|
setCurrency((prev) => (prev === "USD" ? "CAD" : "USD"));
|
|
// In a real app, this would update a context or store
|
|
document.documentElement.style.setProperty("--currency-symbol", currency === "USD" ? "'C$'" : "'$'");
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={toggle}
|
|
className="flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-xs font-medium text-secondary-foreground transition-colors hover:bg-muted"
|
|
>
|
|
<span className={currency === "USD" ? "text-primary font-bold" : "text-muted-foreground"}>USD</span>
|
|
<span className="h-3 w-[1px] bg-muted-foreground/20" />
|
|
<span className={currency === "CAD" ? "text-primary font-bold" : "text-muted-foreground"}>CAD</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function MoodToggle() {
|
|
const [isDark, setIsDark] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (document.documentElement.classList.contains("dark")) {
|
|
setIsDark(true);
|
|
}
|
|
}, []);
|
|
|
|
const toggle = () => {
|
|
const next = !isDark;
|
|
setIsDark(next);
|
|
if (next) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={toggle}
|
|
className="rounded-full p-2 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
|
|
title="Toggle Mood Mode"
|
|
>
|
|
{isDark ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|