site-builder/craft/src/panels/right/styles/ContainerStylePanel.tsx

import React, { useCallback, CSSProperties } from 'react';
import { useEditor } from '@craftjs/core';
import {
  BG_COLORS,
  SPACING_PRESETS,
  RADIUS_PRESETS,
} from '../../../constants/presets';
import {
  StylePanelProps,
  SectionLabel,
  ColorSwatchGrid,
  GradientSwatchGrid,
  PresetButtonGrid,
  labelStyle,
  inputStyle,
  sectionGap,
} from './shared';

/* ---------- CONTAINER / SECTION ---------- */
export const ContainerStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
  const { actions } = useEditor();
  const style: CSSProperties = nodeProps.style || {};

  const setPropStyle = useCallback(
    (property: string, value: string) => {
      actions.setProp(selectedId, (props: any) => {
        props.style = { ...props.style, [property]: value };
      });
    },
    [actions, selectedId],
  );

  const setProp = useCallback(
    (key: string, value: string) => {
      actions.setProp(selectedId, (props: any) => { props[key] = value; });
    },
    [actions, selectedId],
  );

  return (
    <>
      {nodeProps.cssId !== undefined && (
        <div style={sectionGap}>
          <label style={labelStyle}>CSS ID</label>
          <input
            type="text"
            value={nodeProps.cssId || ''}
            onChange={(e) => setProp('cssId', e.target.value)}
            placeholder="my-element-id"
            style={inputStyle}
          />
        </div>
      )}
      {nodeProps.cssClass !== undefined && (
        <div style={sectionGap}>
          <label style={labelStyle}>CSS Class</label>
          <input
            type="text"
            value={nodeProps.cssClass || ''}
            onChange={(e) => setProp('cssClass', e.target.value)}
            placeholder="my-custom-class"
            style={inputStyle}
          />
        </div>
      )}
      <div className="guided-section">
        <SectionLabel>Background Color</SectionLabel>
        <ColorSwatchGrid
          colors={BG_COLORS}
          activeValue={style.backgroundColor as string}
          onSelect={(v) => setPropStyle('backgroundColor', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Background Gradient</SectionLabel>
        <GradientSwatchGrid
          activeValue={style.background as string}
          onSelect={(v) => setPropStyle('background', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Padding</SectionLabel>
        <PresetButtonGrid
          presets={SPACING_PRESETS}
          activeValue={style.padding as string}
          onSelect={(v) => setPropStyle('padding', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Border Radius</SectionLabel>
        <PresetButtonGrid
          presets={RADIUS_PRESETS}
          activeValue={style.borderRadius as string}
          onSelect={(v) => setPropStyle('borderRadius', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Alignment</SectionLabel>
        <div className="preset-grid align-grid">
          {(['left', 'center', 'right', 'justify'] as const).map((a) => (
            <button
              key={a}
              className={`preset-btn ${style.textAlign === a ? 'active' : ''}`}
              onClick={() => setPropStyle('textAlign', a)}
              title={a}
            >
              <i className={`fa fa-align-${a}`} />
            </button>
          ))}
        </div>
      </div>
    </>
  );
};