Alarm App Guide

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

function App() {
  const [alarms, setAlarms] = useState([]);
  const [newAlarm, setNewAlarm] = useState('');

  const addAlarm = () => {
    if (newAlarm) {
      setAlarms([...alarms, newAlarm]);
      setNewAlarm('');
    }
  };

  const deleteAlarm = (index) => {
    const updatedAlarms = alarms.filter((_, i) => i !== index);
    setAlarms(updatedAlarms);
  };

  return (
    <div className='App bg-gray-100 min-h-screen p-8'>
      <h1 className='text-4xl font-bold text-center mb-8 text-gray-800'>Alarm System ⏰</h1>
      <div className='max-w-md mx-auto bg-white p-6 rounded-lg shadow-lg'>
        <div className='flex mb-6'>
          <input
            type='time'
            className='flex-1 p-2 border border-gray-300 rounded-l-lg focus:outline-none'
            value={newAlarm}
            onChange={(e) => setNewAlarm(e.target.value)}
          />
          <button
            className='px-4 py-2 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600'
            onClick={addAlarm}
          >
            Add Alarm
          </button>
        </div>
        <div>
          {alarms.map((alarm, index) => (
            <div key={index} className='flex justify-between items-center p-2 border-b border-gray-200'>
              <div className='text-lg text-gray-700'>{alarm}</div>
              <button
                className='px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600'
                onClick={() => deleteAlarm(index)}
              >
                Delete
              </button>
            </div>
          ))}
        </div>
      </div>
      <div className='text-center mt-8 text-gray-500'>
        © 2025 Alarm System. All rights reserved.
      </div>
    </div>
  );
}

export default App;