CustomThemeCreator.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
import { Theme } from '@/lib/themes';
 
interface CustomThemeCreatorProps {
  onSave: (theme: Theme) => void;
  onClose: () => void;
  existingTheme?: Theme;
}
 
export default function CustomThemeCreator({ onSave, onClose, existingTheme }: CustomThemeCreatorProps) {
  const [themeName, setThemeName] = useState(existingTheme?.name || '');
  const [themeDescription, setThemeDescription] = useState(existingTheme?.description || '');
  const [colors, setColors] = useState({
    bg: existingTheme?.colors.bg || '#f1f5f8',
    surface: existingTheme?.colors.surface || '#ffffff',
    surface2: existingTheme?.colors.surface2 || '#f7fafc',
    text: existingTheme?.colors.text || '#0f1724',
    muted: existingTheme?.colors.muted || '#6b7280',
    border: existingTheme?.colors.border || '#e6eef6',
    brand: existingTheme?.colors.brand || '#00483d',
    brand2: existingTheme?.colors.brand2 || '#00946b',
    warn: existingTheme?.colors.warn || '#b26a00',
    danger: existingTheme?.colors.danger || '#b00020',
    success: existingTheme?.colors.success || '#00946b',
    info: existingTheme?.colors.info || '#0066cc',
  });
 
  const colorFields = [
    { key: 'bg', label: 'Background', description: 'Page background color' },
    { key: 'surface', label: 'Surface', description: 'Card/panel background' },
    { key: 'surface2', label: 'Surface 2', description: 'Subtle inset surface' },
    { key: 'text', label: 'Text', description: 'Primary text color' },
    { key: 'muted', label: 'Muted Text', description: 'Secondary text color' },
    { key: 'border', label: 'Border', description: 'Border and divider color' },
    { key: 'brand', label: 'Brand Primary', description: 'Main brand color' },
    { key: 'brand2', label: 'Brand Secondary', description: 'Accent brand color' },
    { key: 'success', label: 'Success', description: 'Success state color' },
    { key: 'info', label: 'Info', description: 'Info state color' },
    { key: 'warn', label: 'Warning', description: 'Warning state color' },
    { key: 'danger', label: 'Danger', description: 'Error/danger state color' },
  ];
 
  const handleColorChange = (key: string, value: string) => {
    setColors(prev => ({ ...prev, [key]: value }));
  };
 
  const handleSave = () => {
    if (!themeName.trim()) {
      alert('Please enter a theme name');
      return;
    }
 
    const customTheme: Theme = {
      id: existingTheme?.id || `custom-${Date.now()}`,
      name: themeName,
      description: themeDescription,
      colors: {
        ...colors,
        brand2: colors.brand2.startsWith('#') ? colors.brand2 : `${colors.brand2}1f`,
      },
      shadows: {
        shadow: `0 18px 48px ${hexToRgba(colors.brand, 0.15)}`,
        shadowSm: `0 8px 20px ${hexToRgba(colors.brand, 0.1)}`,
      },
      radius: {
        radius: '12px',
        radiusSm: '8px',
      },
      focus: `0 0 0 4px ${hexToRgba(colors.brand, 0.2)}`,
    };
 
    onSave(customTheme);
  };
 
  const hexToRgba = (hex: string, alpha: number): string => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if (!result) return `rgba(0, 0, 0, ${alpha})`;
    
    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
  };
 
  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
      <div className="bg-surface rounded-2xl shadow-theme-2xl max-w-5xl w-full max-h-[90vh] overflow-hidden animate-slide-in">
        {/* Header */}
        <div className="gradient-brand text-surface px-6 py-4 flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-bold">Custom Theme Creator</h2>
            <p className="text-sm opacity-90">Design your own unique color theme</p>
          </div>
          <button
            onClick={onClose}
            className="hover:opacity-80 transition p-2"
            aria-label="Close"
          >
            <Icon name="close" size={28} />
          </button>
        </div>
 
        {/* Content */}
        <div className="p-6 overflow-y-auto max-h-[calc(90vh-180px)]">
          {/* Theme Info */}
          <div className="mb-6">
            <label className="block text-sm font-semibold text-text mb-2">
              Theme Name *
            </label>
            <input
              type="text"
              value={themeName}
              onChange={(e) => setThemeName(e.target.value)}
              placeholder="My Custom Theme"
              className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
            />
          </div>
 
          <div className="mb-6">
            <label className="block text-sm font-semibold text-text mb-2">
              Description
            </label>
            <input
              type="text"
              value={themeDescription}
              onChange={(e) => setThemeDescription(e.target.value)}
              placeholder="A beautiful custom theme for my workspace"
              className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
            />
          </div>
 
          {/* Color Grid */}
          <div className="mb-6">
            <h3 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
              <Icon name="palette" size={24} />
              Color Palette
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {colorFields.map((field) => (
                <div key={field.key} className="card p-4">
                  <label className="block text-sm font-semibold text-text mb-2">
                    {field.label}
                  </label>
                  <p className="text-xs text-muted mb-3">{field.description}</p>
                  
                  <div className="flex gap-2">
                    {/* Color Picker */}
                    <div className="relative flex-1">
                      <input
                        type="color"
                        value={colors[field.key as keyof typeof colors]}
                        onChange={(e) => handleColorChange(field.key, e.target.value)}
                        className="w-full h-10 rounded-lg cursor-pointer border-2 border-border"
                        style={{ 
                          background: colors[field.key as keyof typeof colors],
                        }}
                      />
                    </div>
                    
                    {/* Hex Input */}
                    <input
                      type="text"
                      value={colors[field.key as keyof typeof colors]}
                      onChange={(e) => handleColorChange(field.key, e.target.value)}
                      placeholder="#000000"
                      className="w-24 px-2 py-1 border border-border rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>
 
          {/* Preview */}
          <div className="mb-6">
            <h3 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
              <Icon name="visibility" size={24} />
              Live Preview
            </h3>
            <div 
              className="rounded-xl p-6 border-2"
              style={{ 
                background: colors.bg,
                borderColor: colors.border,
              }}
            >
              {/* Preview Card */}
              <div 
                className="rounded-lg p-6 border shadow-lg mb-4"
                style={{ 
                  background: colors.surface,
                  borderColor: colors.border,
                }}
              >
                <h4 
                  className="text-xl font-bold mb-2"
                  style={{ color: colors.text }}
                >
                  Sample Card
                </h4>
                <p 
                  className="text-sm mb-4"
                  style={{ color: colors.muted }}
                >
                  This is how your theme will look in the application
                </p>
                
                {/* Preview Buttons */}
                <div className="flex gap-2 flex-wrap">
                  <button 
                    className="px-4 py-2 rounded-lg font-semibold text-white"
                    style={{ background: colors.brand }}
                  >
                    Primary Button
                  </button>
                  <button 
                    className="px-4 py-2 rounded-lg font-semibold text-white"
                    style={{ background: colors.success }}
                  >
                    Success
                  </button>
                  <button 
                    className="px-4 py-2 rounded-lg font-semibold text-white"
                    style={{ background: colors.info }}
                  >
                    Info
                  </button>
                  <button 
                    className="px-4 py-2 rounded-lg font-semibold text-white"
                    style={{ background: colors.warn }}
                  >
                    Warning
                  </button>
                  <button 
                    className="px-4 py-2 rounded-lg font-semibold text-white"
                    style={{ background: colors.danger }}
                  >
                    Danger
                  </button>
                </div>
              </div>
 
              {/* Preview Stats */}
              <div className="grid grid-cols-3 gap-4">
                {[colors.success, colors.info, colors.warn].map((color, idx) => (
                  <div 
                    key={idx}
                    className="rounded-lg p-4 border"
                    style={{ 
                      background: colors.surface,
                      borderColor: colors.border,
                    }}
                  >
                    <div 
                      className="text-sm mb-1"
                      style={{ color: colors.muted }}
                    >
                      Metric {idx + 1}
                    </div>
                    <div 
                      className="text-2xl font-bold"
                      style={{ color }}
                    >
                      {(idx + 1) * 123}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
 
        {/* Footer */}
        <div className="border-t border-border px-6 py-4 flex justify-end gap-3 bg-surface-2">
          <button
            onClick={onClose}
            className="px-6 py-2 bg-surface-2 text-text rounded-lg hover:opacity-90 transition font-semibold border border-border"
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            className="btn btn-gradient px-6 py-2 rounded-lg font-semibold"
          >
            <Icon name="save" size={18} className="inline mr-2" />
            Save Theme
          </button>
        </div>
      </div>
    </div>
  );
}