82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
|
|
const users = ["Alice", "Bob", "Charlie"];
|
|
|
|
export default function MandarineApp() {
|
|
const [currentUser, setCurrentUser] = useState(null);
|
|
const [entries, setEntries] = useState([]);
|
|
const [quartiers, setQuartiers] = useState(0);
|
|
|
|
const handleLogin = (user) => {
|
|
setCurrentUser(user);
|
|
};
|
|
|
|
const handleAddEntry = () => {
|
|
if (quartiers > 0) {
|
|
setEntries([...entries, quartiers]);
|
|
setQuartiers(0);
|
|
}
|
|
};
|
|
|
|
const getTableData = () => {
|
|
const counts = {};
|
|
entries.forEach((q) => {
|
|
counts[q] = (counts[q] || 0) + 1;
|
|
});
|
|
return Object.entries(counts);
|
|
};
|
|
|
|
return (
|
|
<div className="p-4">
|
|
{!currentUser ? (
|
|
<div>
|
|
<h2>Connectez-vous :</h2>
|
|
{users.map((user) => (
|
|
<Button key={user} onClick={() => handleLogin(user)} className="m-2">
|
|
{user}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Card className="p-4">
|
|
<h2>Bienvenue, {currentUser}!</h2>
|
|
<div className="flex gap-2 my-4">
|
|
<input
|
|
type="number"
|
|
value={quartiers}
|
|
onChange={(e) => setQuartiers(parseInt(e.target.value) || 0)}
|
|
className="border p-2"
|
|
/>
|
|
<Button onClick={handleAddEntry}>Ajouter</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
<Card className="mt-4">
|
|
<CardContent>
|
|
<h3>Répartition des quartiers</h3>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Nombre de quartiers</TableHead>
|
|
<TableHead>Nombre de mandarines</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{getTableData().map(([q, count]) => (
|
|
<TableRow key={q}>
|
|
<TableCell>{q}</TableCell>
|
|
<TableCell>{count}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|