Telegram 共享费用管理应用设计

import React, { useState } from 'react';

const App = () => {
 const [groups, setGroups] = useState([
 { id: 1, name: 'Trip to Sochi', avatar: '✈️', totalSpent: 1200, userBalance: -200 },
 { id: 2, name: 'Birthday Party', avatar: '🎉', totalSpent: 500, userBalance: 150 },
 ]);
 const [selectedGroup, setSelectedGroup] = useState(null);
 const [showAddExpense, setShowAddExpense] = useState(false);

 const handleGroupClick = (group) => {
 setSelectedGroup(group);
 };

 const handleAddExpense = () => {
 setShowAddExpense(true);
 };

 const handleCloseAddExpense = () => {
 setShowAddExpense(false);
 };

 return (
 <div className="min-h-screen bg-white text-black font-sans">
 {!selectedGroup ? (
 <div className="p-4">
 <h1 className="text-2xl font-bold mb-4">My Groups</h1>
 {groups.map((group) => (
 <div key={group.id} className="flex items-center p-4 mb-2 bg-gray-100 rounded-lg" onClick={() => handleGroupClick(group)}>
 <div className="text-2xl mr-4">{group.avatar}</div>
 <div>
 <p className="font-semibold">{group.name}</p>
 <p className="text-sm">Total Spent: ${group.totalSpent}</p>
 <p className="text-sm">{group.userBalance < 0 ? `You owe $${-group.userBalance}` : `You are owed $${group.userBalance}`}</p>
 </div>
 </div>
 ))}
 <button className="fixed bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full">➕ Create Group</button>
 </div>
 ) : (
 <div className="p-4">
 <h1 className="text-2xl font-bold mb-4">{selectedGroup.name}</h1>
 <div className="bg-gray-100 p-4 rounded-lg mb-4">
 <p>Total Expenses: ${selectedGroup.totalSpent}</p>
 <p>Your Balance: {selectedGroup.userBalance < 0 ? `You owe $${-selectedGroup.userBalance}` : `You are owed $${selectedGroup.userBalance}`}</p>
 <p>Members: 4</p>
 </div>
 <div>
 {[1, 2, 3].map((expense) => (
 <div key={expense} className="p-4 mb-2 bg-gray-100 rounded-lg">
 <p>Description: Dinner</p>
 <p>Amount: $200</p>
 <p>Paid by: Alice</p>
 <p>Split between: Alice, Bob, Carol, Dave</p>
 <p>Date: 2023-10-05</p>
 </div>
 ))}
 </div>
 <button className="fixed bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full" onClick={handleAddExpense}>➕ Add Expense</button>
 {showAddExpense && (
 <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
 <div className="bg-white p-6 rounded-lg w-11/12 max-w-md">
 <h2 className="text-xl font-bold mb-4">Add Expense</h2>
 <input type="text" placeholder="Description" className="w-full p-2 border rounded mb-4" />
 <input type="number" placeholder="Amount" className="w-full p-2 border rounded mb-4" />
 <select className="w-full p-2 border rounded mb-4">
 <option>Alice</option>
 <option>Bob</option>
 <option>Carol</option>
 <option>Dave</option>
 </select>
 <input type="text" placeholder="Participants" className="w-full p-2 border rounded mb-4" />
 <button className="w-full bg-blue-500 text-white p-2 rounded">Add</button>
 <button className="w-full mt-2 p-2 border rounded" onClick={handleCloseAddExpense}>Cancel</button>
 </div>
 </div>
 )}
 </div>
 )}
 </div>
 );
};

export default App;