ZacharyZhang-NY
c0f677ccc9
- navbar: sticky, transparent to blur-on-scroll, wordmark + mono nav links + theme toggle + Download CTA, Reicon Menu/Xmark icons (components/layout) - theme-toggle: Reicon Sun/Moon icons - hero: meadow badge, tight Instrument Sans headline, Download + How-it-works CTAs, availability line, framed dashboard shot (components/sections) - features: five stacked heading-over-panel sections mapping the org chart, office, messages, connectors and cost-control screens - ui/media-frame: shared framed product-shot panel - reveal: progressive enhancement — content is visible without JS and only hidden once the js class is present, then revealed on scroll - remove the superseded flat navbar/hero/features components Verified: next build green; desktop + mobile screenshots reviewed.
21 lines
660 B
TypeScript
21 lines
660 B
TypeScript
"use client";
|
|
|
|
import { Sun } from "reicon-react/icons/Sun";
|
|
import { Moon } from "reicon-react/icons/Moon";
|
|
import { useTheme } from "./theme-provider";
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, toggleTheme } = useTheme();
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggleTheme}
|
|
aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
|
|
className="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-[var(--muted)] transition-colors hover:bg-[var(--panel-soft)] hover:text-[var(--text)]"
|
|
>
|
|
{theme === "light" ? <Moon size={18} /> : <Sun size={18} />}
|
|
</button>
|
|
);
|
|
}
|