- Vite + React + SWC + TypeScript SPA with react-router and react-bootstrap - Dark/light/system theme with Bootstrap 5.3 data-bs-theme - Home page with repo setup instructions and copyable code blocks - Package list and detail pages driven by packages.json - Python script to generate packages.json from repodata XML - Nginx config updated for SPA fallback, asset caching, removed autoindex - New deploy-ui workflow triggered on ui/ or nginx config changes, requires runners with nvm label - packages.json generation added to publish job after createrepo_c - Runner setup docs for nvm and sequoia-sq added to readme Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
33 lines
901 B
TypeScript
33 lines
901 B
TypeScript
import { Dropdown } from "react-bootstrap";
|
|
import { useTheme } from "./ThemeContext.tsx";
|
|
|
|
const options = [
|
|
{ key: "light" as const, label: "Light", icon: "☀️" },
|
|
{ key: "dark" as const, label: "Dark", icon: "🌙" },
|
|
{ key: "system" as const, label: "System", icon: "💻" },
|
|
];
|
|
|
|
export function ThemeToggle() {
|
|
const { choice, setChoice } = useTheme();
|
|
const current = options.find((o) => o.key === choice) ?? options[2];
|
|
|
|
return (
|
|
<Dropdown align="end">
|
|
<Dropdown.Toggle variant="outline-secondary" size="sm">
|
|
{current.icon}
|
|
</Dropdown.Toggle>
|
|
<Dropdown.Menu>
|
|
{options.map((o) => (
|
|
<Dropdown.Item
|
|
key={o.key}
|
|
active={o.key === choice}
|
|
onClick={() => setChoice(o.key)}
|
|
>
|
|
{o.icon} {o.label}
|
|
</Dropdown.Item>
|
|
))}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
);
|
|
}
|