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;