Function ThemeSelector

components/theme-selector.tsx:19–50

()

import { ScrollArea } from "./ui/8bit/scroll-area";

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

  return (
    <div className="flex items-center justify-between gap-2 border-y border-dashed p-5">
      <div className="w-64">
        <SelectThemeDropdown
          activeTheme={activeTheme}
          setActiveTheme={setActiveTheme}
        />
      </div>

      <Dialog>
        <DialogTrigger asChild>
          <Button>Copy</Button>
        </DialogTrigger>
        <DialogContent>
          <ScrollArea className="max-h-[80vh]">
            <DialogHeader>
              <DialogTitle>Theme</DialogTitle>
              <DialogDescription>
                Copy and paste the following code into your CSS file.
              </DialogDescription>
            </DialogHeader>

            <CodeSnippet>{getThemeCode(activeTheme)}</CodeSnippet>
          </ScrollArea>
        </DialogContent>
      </Dialog>
    </div>
  );
}