每日牛奶记录App

import React, { useState } from 'react';

const App = () => {
  const [records, setRecords] = useState([]);
  const [date, setDate] = useState('');
  const [milkAmount, setMilkAmount] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (date && milkAmount) {
      setRecords([...records, { date, milkAmount }]);
      setDate('');
      setMilkAmount('');
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <div className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">
        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">Daily Cow Milk Record</h1>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Date</label>
            <input
              type="date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Milk Amount (liters)</label>
            <input
              type="number"
              value={milkAmount}
              onChange={(e) => setMilkAmount(e.target.value)}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              required
            />
          </div>
          <button
            type="submit"
            className="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
          >
            Add Record
          </button>
        </form>
        <div className="mt-8">
          <h2 className="text-2xl font-bold text-gray-800 mb-4">Records</h2>
          <div className="space-y-4">
            {records.map((record, index) => (
              <div key={index} className="bg-gray-50 p-4 rounded-lg shadow-sm">
                <p className="text-sm text-gray-600">Date: {record.date}</p>
                <p className="text-sm text-gray-600">Milk Amount: {record.milkAmount} liters</p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <footer className="text-center text-sm text-gray-500 mt-8">
        © 2025 Daily Cow Milk Record. All rights reserved.
      </footer>
    </div>
  );
};

export default App;