DRY & KISS Principles

In the context of React components, how does this implementation violate the DRY principle?

function UserProfile({ user }) {
  return (
    <div className="card p-4 shadow rounded-lg">
      <h2 className="text-xl font-bold mb-2">{user.name}</h2>
      <p className="text-gray-600 mb-4">{user.bio}</p>
    </div>
  );
}

function ProductCard({ product }) {
  return (
    <div className="card p-4 shadow rounded-lg">
      <h2 className="text-xl font-bold mb-2">{product.name}</h2>
      <p className="text-gray-600 mb-4">{product.description}</p>
    </div>
  );
}

The components have different props
The class names should be variables
The HTML structure is duplicated
This code violates DRY by duplicating the card structure and styling across components. A better approach would be to create a reusable Card component: function Card({ title, content, className = '' }) { return ( <div className={`card p-4 shadow rounded-lg ${className}`}> <h2 className="text-xl font-bold mb-2">{title}</h2> <p className="text-gray-600 mb-4">{content}</p> </div> ); } function UserProfile({ user }) { return <Card title={user.name} content={user.bio} />; } function ProductCard({ product }) { return <Card title={product.name} content={product.description} />; } This approach: 1. Eliminates duplicate structure and styling 2. Makes it easier to maintain consistent styling 3. Allows for easy modifications across all cards 4. Provides flexibility through props
The text styling is inconsistent

Next Question (9/20)