Global Food Donation Simulator using React

[{"title":"zerohunger.com","list":[{"command":"import { useState } from \"react\";\nimport { Card"},{"command":" CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function DonationSimulator() {\n  const [donations"},{"command":" setDonations] = useState([]);\n  const [formData"},{"command":" setFormData] = useState({ name: \"John Doe\""},{"command":" amount: \"\" });\n\n  const handleChange = (e) => {\n    setFormData({ ...formData"},{"command":" [e.target.name]: e.target.value });\n  };\n\n  const handleDonate = () => {\n    if (formData.name && formData.amount) {\n      setDonations([...donations"},{"command":" formData]);\n      setFormData({ name: \"John Doe\""},{"command":" amount: \"\" });\n    }\n  };\n\n  return (\n    <div className=\"p-6 max-w-2xl mx-auto\">\n      <h1 className=\"text-xl font-bold mb-4\">Global Food Donation Simulator</h1>\n      <p className=\"mb-4\">Simulate donating to help fight hunger worldwide.</p>\n      <div className=\"mb-4\">\n        <input\n          type=\"text\"\n          name=\"name\"\n          placeholder=\"Your Name\"\n          value={formData.name}\n          onChange={handleChange}\n          className=\"border p-2 rounded w-full mb-2\"\n        />\n        <input\n          type=\"number\"\n          name=\"amount\"\n          placeholder=\"Donation Amount ($)\"\n          value={formData.amount}\n          onChange={handleChange}\n          className=\"border p-2 rounded w-full mb-2\"\n        />\n        <Button onClick={handleDonate} className=\"w-full\">Simulate Donation</Button>\n      </div>\n      <h2 className=\"text-lg font-semibold mt-6\">Donation Records</h2>\n      <div>\n        {donations.length === 0 ? (\n          <p>No donations recorded yet.</p>\n        ) : (\n          donations.map((donation"},{"command":" index) => (\n            <Card key={index} className=\"my-2 p-2\">\n              <CardContent>\n                <p><strong>Name:</strong> {donation.name}</p>\n                <p><strong>Amount:</strong> ${donation.amount}</p>\n              </CardContent>\n            </Card>\n          ))\n        )}\n      </div>\n    </div>\n  );\n}\n"}],"id":"zerohungercom-0.7989250568502531"}]