创建SQLite表单与历史页面

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import './App.css';

const Home = ({ onSubmit }) => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    gender: '',
    newsletter: false
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(formData);
  };

  return (
    <div className='home bg-gradient-to-r from-blue-500 to-purple-600 min-h-screen flex items-center justify-center'>
      <form onSubmit={handleSubmit} className='bg-white p-8 rounded-lg shadow-lg w-96'>
        <h2 className='text-2xl font-bold mb-6 text-center text-gray-800'>Submit Your Details</h2>
        <div className='mb-4'>
          <label className='block text-gray-700'>Name</label>
          <input
            type='text'
            name='name'
            value={formData.name}
            onChange={handleChange}
            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 className='mb-4'>
          <label className='block text-gray-700'>Email</label>
          <input
            type='email'
            name='email'
            value={formData.email}
            onChange={handleChange}
            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 className='mb-4'>
          <label className='block text-gray-700'>Gender</label>
          <select
            name='gender'
            value={formData.gender}
            onChange={handleChange}
            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
          >
            <option value=''>Select</option>
            <option value='male'>Male</option>
            <option value='female'>Female</option>
            <option value='other'>Other</option>
          </select>
        </div>
        <div className='mb-4'>
          <label className='flex items-center'>
            <input
              type='checkbox'
              name='newsletter'
              checked={formData.newsletter}
              onChange={handleChange}
              className='h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'
            />
            <span className='ml-2 text-gray-700'>Subscribe to newsletter</span>
          </label>
        </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'>Submit</button>
      </form>
    </div>
  );
};

const History = ({ history }) => (
  <div className='history bg-gradient-to-r from-green-400 to-blue-500 min-h-screen flex items-center justify-center'>
    <div className='bg-white p-8 rounded-lg shadow-lg w-96'>
      <h2 className='text-2xl font-bold mb-6 text-center text-gray-800'>Submission History</h2>
      {history.length > 0 ? (
        <ul>
          {history.map((entry, index) => (
            <li key={index} className='mb-4 p-4 border border-gray-200 rounded-md'>
              <p><strong>Name:</strong> {entry.name}</p>
              <p><strong>Email:</strong> {entry.email}</p>
              <p><strong>Gender:</strong> {entry.gender}</p>
              <p><strong>Newsletter:</strong> {entry.newsletter ? 'Yes' : 'No'}</p>
            </li>
          ))}
        </ul>
      ) : (
        <p className='text-center text-gray-600'>No submissions yet.</p>
      )}
    </div>
  </div>
);

const App = () => {
  const [history, setHistory] = useState([]);

  const handleSubmit = (formData) => {
    setHistory(prevHistory => [...prevHistory, formData]);
  };

  return (
    <Router>
      <Switch>
        <Route exact path='/' render={() => <Home onSubmit={handleSubmit} />} />
        <Route path='/history' render={() => <History history={history} />} />
      </Switch>
      <nav className='fixed bottom-0 w-full bg-white shadow-lg'>
        <div className='flex justify-around p-4'>
          <Link to='/' className='text-gray-700 hover:text-indigo-600'>Home</Link>
          <Link to='/history' className='text-gray-700 hover:text-indigo-600'>History</Link>
        </div>
      </nav>
    </Router>
  );
};

export default App;