Create Your Own Component Ecosystem

// Let the engine handle data, translation, and theming
export default function PersonCard({ block, input }) {
  // block.title - already translated for you
  // block.params - your custom parameters
  // input - dynamically fetched content
  
  return (
    <div className="people-grid">
      <h2>{block.title}</h2>
      {input.map(person => (
        <div key={person.id}>
          <h3>{person.name}</h3>
          <p>{person.title}</p>
          {person.image && (
            <img src={person.image} alt={person.name} />
          )}
        </div>
      ))}
    </div>
  );
}