ColorPicker

"use client";

import { useState } from "react";
import { ColorPicker, DEFAULT_COLOR_PICKER_PRESETS, Button } from "@pimolu/react";

const brandPresets = DEFAULT_COLOR_PICKER_PRESETS;

function BrandStudio() {
  const [brand, setBrand] = useState("#5B55E7");
  const [accent, setAccent] = useState("#0EA5E9");
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0"
    >
      <div className="grid gap-5 min-w-0">
        <ColorPicker
          label="Brand color"
          value={brand}
          onValueChange={setBrand}
          presets={brandPresets}
        />
        <ColorPicker
          label="Accent color"
          value={accent}
          onValueChange={setAccent}
          presets={brandPresets}
          size="sm"
        />
        <div className="flex flex-wrap items-center gap-3 min-w-0">
          <Button
            type="button"
            size="sm"
            appearance="ghost"
            onClick={() => {
              setBrand("#5B55E7");
              setAccent("#0EA5E9");
            }}
          >
            Reset palette
          </Button>
        </div>
      </div>
      <div
        className="min-w-0 rounded-lg border border-border p-6 grid gap-5 min-w-0"
        style={{
          borderTop: `4px solid ${brand}`
        }}
      >
        <div className="flex flex-wrap items-center gap-3 min-w-0">
          <span
            aria-hidden="true"
            style={{
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              width: 40,
              height: 40,
              borderRadius: 12,
              background: brand,
              color: "#ffffff",
              fontWeight: 700,
            }}
          >P</span>
          <div>
            <strong style={{ color: brand }}>Pimolu Studio</strong>
            <p className="text-sm text-muted leading-relaxed">
              {brand} · {accent}
            </p>
          </div>
        </div>
        <p className="text-sm text-muted leading-relaxed">
          A live preview of the two selected tokens. The picker reports
          uppercase #RRGGBB values.
        </p>
        <div className="flex flex-wrap items-center gap-3 min-w-0">
          <Button
            type="button"
            size="sm"
            style={{
              background: brand,
              borderColor: brand,
              color: "#ffffff",
            }}
          >
            Start a project
          </Button>
          <Button
            type="button"
            size="sm"
            appearance="outline"
            style={{
              color: accent,
              borderColor: accent,
            }}
          >
            View work
          </Button>
        </div>
      </div>
    </div>
  );
}

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