ThemeBuilder

"use client";

import { useState } from "react";
import { Badge, ThemeBuilder } from "@pimolu/react";

const presets = [
  {
    id: "default",
    label: "Default",
    description: "Balanced indigo with soft depth.",
    colors: ["#4F46E5", "#818CF8", "#E0E7FF", "#F8FAFC"],
  },
  {
    id: "monochrome",
    label: "Monochrome",
    description: "Ink, paper and a single accent.",
    colors: ["#171717", "#525252", "#D4D4D4", "#FAFAFA"],
  },
  {
    id: "cartoon",
    label: "Cartoon",
    description: "Playful colour and confident outlines.",
    colors: ["#FF5C8A", "#FFD166", "#06D6A0", "#118AB2"],
  },
  {
    id: "glass",
    label: "Glass",
    description: "Translucent surfaces and cool light.",
    colors: ["#38BDF8", "#A5B4FC", "#E0F2FE", "#F8FAFC"],
  },
  {
    id: "luxury",
    label: "Luxury",
    description: "Warm neutrals, gold and quiet contrast.",
    colors: ["#926A35", "#E8CF9B", "#241F1A", "#FAF6EF"],
  },
  {
    id: "neo-brutalism",
    label: "Neo-brutalism",
    description: "Hard edges, offset shadows, loud accents.",
    colors: ["#FFE600", "#FF5C8A", "#171717", "#FFFFFF"],
  },
];

function ControlledBuilder() {
  const [preset, setPreset] = useState("default");
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [brandColor, setBrandColor] = useState("#5B55E7");
  const [radius, setRadius] = useState("medium");
  const [density, setDensity] = useState("comfortable");
  return (
    <div className="grid gap-5 min-w-0">
      <div className="flex flex-wrap items-center gap-3 min-w-0">
        <Badge variant="primary" appearance="soft">
          {preset}
        </Badge>
        <Badge variant="neutral" appearance="soft">
          {theme}
        </Badge>
        <Badge variant="neutral" appearance="soft">
          radius: {radius}
        </Badge>
        <Badge variant="neutral" appearance="soft">
          density: {density}
        </Badge>
        <span className="text-sm text-muted leading-relaxed">{brandColor}</span>
      </div>
      <ThemeBuilder
        title="Build your theme"
        presets={presets}
        value={preset}
        onValueChange={setPreset}
        theme={theme}
        onThemeChange={setTheme}
        brandColor={brandColor}
        onBrandColorChange={setBrandColor}
        radius={radius}
        onRadiusChange={setRadius}
        density={density}
        onDensityChange={setDensity}
      />
    </div>
  );
}

export function DemoExample() {
  return (<ControlledBuilder />);
}