Exemplo aplicando Partial pattern em React

FeaturePartial.tsx

import { FeatureModel } from '@/domain/models/Feature';

export const FeaturePartial = (feature: FeatureModel, index?: number) => {
  return (
     <div
        key={feature.id}
        className="rounded-lg p-0.5"
      >
        <div className="flex flex-col items-center">
          <img src={feature.icon.src} alt={feature.icon.alt} />

          <h3 className="font-inter font-bold text-center">
            {feature.name}
          </h3>

          <p className="font-inter text-center">
            {feature.description}
          </p>
        </div>
      </div>
  );
};

index.tsx

<!-- Sem partial -->
export const FeatureCards = ({ features }: FeatureCardsProps) => {
  return (
    <div className="flex flex-col gap-4">
      {features.map((feature, index) => {
        return (
          <div
            key={feature.id}
            className="rounded-lg p-0.5"
          >
            <div className="flex flex-col items-center">
              <img src={feature.icon.src} alt={feature.icon.alt} />
              
              <h3 className="font-inter font-bold text-center">
                {feature.name}
              </h3>

              <p className="font-inter text-center">
                {feature.description}
              </p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

import { FeaturePartial } from './partials/FeaturePartial';

<!-- Com partial -->
export const FeatureCards = ({ features }: FeatureCardsProps) => {
  return (
    <div className="flex flex-col gap-4">
      {features.map(FeaturePartial)}
    </div>
  );
};