Theme Generator

'use client';
 
import { useState, useEffect } from 'react';
import { loadColorAssembly, type ColorAssemblyAPI } from '@cymbol/colorassembly';
 
export function ThemeGenerator() {
  const [api, setApi] = useState<ColorAssemblyAPI | null>(null);
  const [brandColor, setBrandColor] = useState('#6366f1');
  const [mode, setMode] = useState<'light' | 'dark'>('light');
 
  useEffect(() => {
    loadColorAssembly().then(setApi);
  }, []);
 
  if (!api) return <div>Loading...</div>;
 
  const rgb = api.transforms.hexToRgb({ hex: brandColor });
  const palette = api.generate.semanticPalette(rgb, mode);
 
  return (
    <div className="space-y-8">
      <div>
        <label className="block mb-2 font-semibold">Brand Color</label>
        <input
          type="color"
          value={brandColor}
          onChange={(e) => setBrandColor(e.target.value)}
          className="w-full h-16"
        />
      </div>
 
      <div className="flex gap-4">
        <button
          onClick={() => setMode('light')}
          className={`px-4 py-2 rounded ${mode === 'light' ? 'bg-blue-600 text-white' : 'border'}`}
        >
          Light Mode
        </button>
        <button
          onClick={() => setMode('dark')}
          className={`px-4 py-2 rounded ${mode === 'dark' ? 'bg-blue-600 text-white' : 'border'}`}
        >
          Dark Mode
        </button>
      </div>
 
      {/* Preview */}
      <div
        className="p-8 rounded-lg"
        style={{
          backgroundColor: api.transforms.rgbToHex(palette.background).hex,
          color: api.transforms.rgbToHex(palette.text).hex,
        }}
      >
        <h2 className="text-2xl font-bold mb-4">Theme Preview</h2>
        <p className="mb-4" style={{ color: api.transforms.rgbToHex(palette.textMuted).hex }}>
          This is how your {mode} theme looks
        </p>
        <div className="flex gap-2">
          <button
            className="px-4 py-2 rounded"
            style={{
              backgroundColor: api.transforms.rgbToHex(palette.primary).hex,
              color: api.transforms.rgbToHex(palette.onPrimary).hex,
            }}
          >
            Primary
          </button>
          <button
            className="px-4 py-2 rounded"
            style={{
              backgroundColor: api.transforms.rgbToHex(palette.success).hex,
              color: api.transforms.rgbToHex(palette.onSuccess).hex,
            }}
          >
            Success
          </button>
        </div>
      </div>
    </div>
  );
}