This component is not reusable. Refactor it using the composition pattern.

The original code violates the DRY (Don’t Repeat Yourself) principle. The container div with its style={panelStyles} and the h2 title are repeated for every panel. This is a classic sign that a component should be extracted.

The best way to fix this is by creating a generic Panel component that encapsulates the repeated structure and styling. We can then use props.children to place any content we want inside this panel. This is a core React concept called composition. The Panel component “contains” the children you pass to it.

This makes our Dashboard component much cleaner and gives us a Panel component we can reuse anywhere in our application.

Here is the corrected implementation:

import React from 'react';

const panelStyles = {
  border: '1px solid #ccc',
  borderRadius: '8px',
  padding: '16px',
  marginBottom: '16px',
  boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
};

const titleStyles = {
  margin: '0 0 10px 0',
  borderBottom: '1px solid #eee',
  paddingBottom: '10px',
};

// The reusable Panel component using composition
function Panel({ title, children }) {
  return (
    <div style={panelStyles}>
      <h2 style={titleStyles}>{title}</h2>
      {children}
    </div>
  );
}

// The refactored Dashboard, now clean and declarative
export default function Dashboard() {
  return (
    <div>
      <Panel title="Welcome">
        <p>Welcome to your dashboard, Admin!</p>
      </Panel>

      <Panel title="Analytics">
        <p>Here are your user engagement charts.</p>
        <img src="https://via.placeholder.com/300x100.png?text=Chart" alt="Chart" />
      </Panel>

      <Panel title="Settings">
        <p>Configure your notification preferences.</p>
        <button>Edit Settings</button>
      </Panel>
    </div>
  );
}