svg-layout-designer-react/src/Components/Properties/Properties.tsx

import * as React from 'react';
import ContainerProperties from '../../Interfaces/Properties';

interface IPropertiesProps {
  properties?: ContainerProperties
  onChange: (key: string, value: string) => void
}

export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
  if (props.properties === undefined) {
    return <div></div>;
  }

  const groupInput: React.ReactNode[] = [];
  Object
    .entries(props.properties)
    .forEach((pair) => handleProperties(pair, groupInput, props.onChange));

  return (
    <div className='p-3 bg-slate-200 h-3/5 overflow-y-auto'>
      { groupInput }
    </div>
  );
};

const handleProperties = (
  [key, value]: [string, string | number],
  groupInput: React.ReactNode[],
  onChange: (key: string, value: string) => void
): void => {
  const id = `property-${key}`;
  const type = 'text';
  const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
  groupInput.push(
    <div key={id} className='mt-4'>
      <label className='text-sm font-medium text-gray-800' htmlFor={id}>{key}</label>
      <input
        className='text-base font-medium transition-all text-gray-800 mt-1 block w-full px-3 py-2
          bg-white border-2 border-white rounded-lg placeholder-gray-800
          focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
         disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none
         '
        type={type}
        id={id}
        value={value}
        onChange={(event) => onChange(key, event.target.value)}
        disabled={isDisabled}
      />
    </div>
  );
};