Upload components/NationCard.jsx with huggingface_hub

components/NationCard.jsx

@@ -0,0 +1,20 @@
+export default function NationCard({ nation, onSelect }) {
+  return (
+    <div 
+      className="bg-white rounded-lg shadow-md p-4 cursor-pointer hover:shadow-lg transition-shadow"
+      onClick={() => onSelect(nation)}
+    >
+      <div className="flex items-center space-x-4">
+        <img 
+          src={`https://flagcdn.com/w80/${nation.flagCode}.png`} 
+          alt={`${nation.name} flag`} 
+          className="w-12 h-8 object-cover"
+        />
+        <div>
+          <h3 className="font-bold">{nation.name}</h3>
+          <p className="text-sm text-gray-600">Population: {nation.population}</p>
+        </div>
+      </div>
+    </div>
+  )
+}