components/ResourcePanel.jsx

export default function ResourcePanel({ resources }) {
  return (
    <div className="bg-gray-100 p-4 rounded-lg mb-4">
      <h3 className="font-bold mb-2">Resources</h3>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
        {Object.entries(resources).map(([key, value]) => (
          <div key={key} className="bg-white p-2 rounded">
            <p className="text-sm capitalize">{key}</p>
            <p className="font-bold">{value}</p>
          </div>
        ))}
      </div>
    </div>
  )
}