Tạo một component TimeTrackingForm trong ReactJS

import React, { useState } from 'react';
import './TimeTrackingForm.css';

const TimeTrackingForm = () => {
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');
  const [description, setDescription] = useState('');

  const handleStartTimeChange = (e) => {
    setStartTime(e.target.value);
  };

  const handleEndTimeChange = (e) => {
    setEndTime(e.target.value);
  };

  const handleDescriptionChange = (e) => {
    setDescription(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Đoạn này bạn có thể thêm logic để xử lý dữ liệu, ví dụ: gửi dữ liệu đến server, lưu vào state của ứng dụng, ...
    console.log('Start Time:', startTime);
    console.log('End Time:', endTime);
    console.log('Description:', description);
  };

  return (
    <div className="time-tracking-form-container">
      <h2>Time Tracking Form</h2>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="start-time">Start Time:</label>
          <input
            type="time"
            id="start-time"
            value={startTime}
            onChange={handleStartTimeChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="end-time">End Time:</label>
          <input
            type="time"
            id="end-time"
            value={endTime}
            onChange={handleEndTimeChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="description">Description:</label>
          <textarea
            id="description"
            value={description}
            onChange={handleDescriptionChange}
            required
          ></textarea>
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default TimeTrackingForm;

/* TimeTrackingForm.css */

.time-tracking-form-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
}

input[type="time"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #3498db;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

button:hover {
  background-color: #2980b9;
}

import React from 'react';
import TimeTrackingForm from './TimeTrackingForm';
import './TimeTrackingForm.css'; // Import CSS file

const App = () => {
  return (
    <div className="App">
      <h1>Time Tracking App</h1>
      <TimeTrackingForm />
    </div>
  );
};

export default App;