Function ThemeSelectorExample

components/examples/theme-selector.tsx:13–132

()

import { Separator } from "../ui/8bit/separator";

export default function ThemeSelectorExample() {
  const { activeTheme, setActiveTheme } = useThemeConfig();

  return (
    <div className="space-y-8">
      <div className="space-y-4">
        <div className="space-y-2">
          <div className="font-medium text-sm">Theme Selector</div>
          <p className="text-muted-foreground text-xs">
            Theme selector with retro themes dropdown
          </p>
          <div className="w-64">
            <SelectThemeDropdown
              activeTheme={activeTheme}
              setActiveTheme={setActiveTheme}
            />
          </div>
        </div>
      </div>

      {/* Current Theme Display */}
      <div className="space-y-4">
        <div className="space-y-2">
          <div className="font-medium text-sm">Current Theme</div>
          <div className="flex items-center gap-4">
            <Badge>{activeTheme}</Badge>
            <span className="text-muted-foreground text-xs">
              Active theme applied to this page
            </span>
          </div>
        </div>
      </div>

      {/* Available Themes Grid */}
      <div className="retro space-y-4">
        <h4 className="font-medium text-md">Available Themes</h4>
        <p className="text-muted-foreground text-sm">
          Click on any theme below to switch to it instantly
        </p>
        <div className="flex flex-wrap gap-5">
          {Object.values(Theme).map((theme) => (
            <Button
              key={theme}
              onClick={() => setActiveTheme(theme)}
              variant={activeTheme === theme ? "outline" : "default"}
            >
              {theme.replace("-", " ")}
            </Button>
          ))}
        </div>
      </div>

      <h3 className="font-bold text-lg">Installation</h3>

      <Separator />

      <InstallationCommands packageName="theme-selector" />