39948-vm/frontend/src/components/ElementSettings/DescriptionSettingsSectionCompact.tsx

/**
 * DescriptionSettingsSectionCompact
 *
 * Compact description element settings for constructor sidebar.
 * Icon, title, text, font sizes, font families, colors, and background.
 */

import React from 'react';
import type { AssetOption } from '../../types/constructor';
import { addFallbackAssetOption } from '../../lib/constructorHelpers';
import { FONT_OPTIONS } from '../../lib/fonts';

interface DescriptionSettingsSectionCompactProps {
  iconUrl: string;
  descriptionTitle: string;
  descriptionText: string;
  descriptionTitleFontSize: string;
  descriptionTextFontSize: string;
  descriptionTitleFontFamily: string;
  descriptionTextFontFamily: string;
  descriptionTitleColor: string;
  descriptionTextColor: string;
  iconAssetOptions: AssetOption[];
  onChange: (prop: string, value: string) => void;
}

const DescriptionSettingsSectionCompact: React.FC<
  DescriptionSettingsSectionCompactProps
> = ({
  iconUrl,
  descriptionTitle,
  descriptionText,
  descriptionTitleFontSize,
  descriptionTextFontSize,
  descriptionTitleFontFamily,
  descriptionTextFontFamily,
  descriptionTitleColor,
  descriptionTextColor,
  iconAssetOptions,
  onChange,
}) => {
  return (
    <div className='space-y-2'>
      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Icon
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={iconUrl}
          onChange={(event) => onChange('iconUrl', event.target.value)}
        >
          <option value=''>Not selected</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            iconUrl,
            `Current icon · ${iconUrl}`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Description title
        </label>
        <input
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={descriptionTitle}
          onChange={(event) => onChange('descriptionTitle', event.target.value)}
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Description text
        </label>
        <textarea
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          rows={5}
          value={descriptionText}
          onChange={(event) => onChange('descriptionText', event.target.value)}
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Title font size (px)
        </label>
        <input
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={descriptionTitleFontSize}
          onChange={(event) =>
            onChange('descriptionTitleFontSize', event.target.value)
          }
          placeholder='e.g. 48'
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Text font size (px)
        </label>
        <input
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={descriptionTextFontSize}
          onChange={(event) =>
            onChange('descriptionTextFontSize', event.target.value)
          }
          placeholder='e.g. 36'
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Title font family
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={descriptionTitleFontFamily}
          onChange={(event) =>
            onChange('descriptionTitleFontFamily', event.target.value)
          }
        >
          <option value=''>Not set</option>
          {FONT_OPTIONS.map((font) => (
            <option key={font.key} value={font.key}>
              {font.label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Text font family
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={descriptionTextFontFamily}
          onChange={(event) =>
            onChange('descriptionTextFontFamily', event.target.value)
          }
        >
          <option value=''>Not set</option>
          {FONT_OPTIONS.map((font) => (
            <option key={font.key} value={font.key}>
              {font.label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Title color
        </label>
        <input
          type='color'
          className='w-full h-8 rounded border border-gray-300 px-1 py-1'
          value={descriptionTitleColor || '#000000'}
          onChange={(event) =>
            onChange('descriptionTitleColor', event.target.value)
          }
        />
      </div>

      <div>
        <label className='mb-1 block text-[11px] font-semibold text-white/80'>
          Text color
        </label>
        <input
          type='color'
          className='w-full h-8 rounded border border-gray-300 px-1 py-1'
          value={descriptionTextColor || '#4B5563'}
          onChange={(event) =>
            onChange('descriptionTextColor', event.target.value)
          }
        />
      </div>
    </div>
  );
};

export default DescriptionSettingsSectionCompact;