穆斯林纪念程序设计

import React, { useState } from 'react';

function App() {
 const [remembrances, setRemembrances] = useState([
 { id: 1, text: 'Morning Remembrance 1', time: '06:00 AM', audio: 'audio1.mp3' },
 { id: 2, text: 'Evening Remembrance 1', time: '06:00 PM', audio: 'audio2.mp3' }
 ]);
 const [newRemembrance, setNewRemembrance] = useState('');
 const [newTime, setNewTime] = useState('');
 const [ruqyah, setRuqyah] = useState('');

 const addRemembrance = () => {
 if (newRemembrance && newTime) {
 const newId = remembrances.length + 1;
 setRemembrances([...remembrances, { id: newId, text: newRemembrance, time: newTime }]);
 setNewRemembrance('');
 setNewTime('');
 }
 };

 return (
 <div className="min-h-screen bg-gradient-to-r from-green-100 to-blue-100 p-10">
 <h1 className="text-4xl font-bold text-center text-green-900 mb-10">Muslim Remembrance Program</h1>
 <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
 <div className="bg-white p-6 rounded-lg shadow-lg">
 <h2 className="text-2xl font-semibold text-green-800 mb-4">Remembrance List</h2>
 {remembrances.map(item => (
 <div key={item.id} className="mb-4">
 <p className="text-lg font-medium text-green-700">{item.text} - <span className="text-gray-500">{item.time}</span></p>
 </div>
 ))}
 </div>
 <div className="bg-white p-6 rounded-lg shadow-lg">
 <h2 className="text-2xl font-semibold text-green-800 mb-4">Add New Remembrance</h2>
 <input type="text" className="w-full p-2 mb-3 border rounded" placeholder="Remembrance text" value={newRemembrance} onChange={(e) => setNewRemembrance(e.target.value)} />
 <input type="time" className="w-full p-2 mb-3 border rounded" value={newTime} onChange={(e) => setNewTime(e.target.value)} />
 <button onClick={addRemembrance} className="w-full p-2 bg-green-600 text-white rounded hover:bg-green-700">Add Remembrance</button>
 </div>
 </div>
 <div className="bg-white p-6 rounded-lg shadow-lg">
 <h2 className="text-2xl font-semibold text-green-800 mb-4">Legal Ruqyah</h2>
 <textarea className="w-full p-2 border rounded" rows="4" placeholder="Enter legal ruqyah text" value={ruqyah} onChange={(e) => setRuqyah(e.target.value)}></textarea>
 </div>
 <footer className="text-center text-gray-600 mt-10">
 © 2025 Muslim Remembrance Program. All rights reserved.
 </footer>
 </div>
 );
}

export default App;