migrating to pico.css

This commit is contained in:
Nicola Malizia
2025-10-10 19:27:57 +02:00
parent 41da3553aa
commit 5fc75397e4
10 changed files with 171 additions and 580 deletions

View File

@@ -24,11 +24,10 @@ function CelebrityList() {
}
};
const handleDelete = async (id) => {
if (window.confirm('Sei sicuro di voler eliminare questa celebrità?')) {
const handleDelete = async (id, name) => {
if (window.confirm(`Sei sicuro di voler eliminare ${name}?`)) {
try {
await deleteCelebrity(id);
// Rimuovi la celebrità dalla lista senza ricaricare i dati
setCelebrities(celebrities.filter((c) => c.id !== id));
} catch (err) {
alert(`Errore: ${err.message}`);
@@ -36,48 +35,57 @@ function CelebrityList() {
}
};
if (loading) return <p>Caricamento in corso...</p>;
if (error) return <p>Errore: {error}</p>;
return (
<div>
<h1>Catalogo Celebrità</h1>
<Link to="/celebrity/new" className="button-new">
+ Aggiungi Nuova Celebrità
</Link>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Seno (cm)</th>
<th>Vita (cm)</th>
<th>Fianchi (cm)</th>
<th>Taglia Reggiseno</th>
<th>Naturali?</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
{celebrities.map((celeb) => (
<tr key={celeb.id}>
<td>{celeb.name}</td>
<td>{celeb.bust_cm || 'N/A'}</td>
<td>{celeb.waist_cm || 'N/A'}</td>
<td>{celeb.hips_cm || 'N/A'}</td>
<td>
{celeb.bra_band_size && celeb.bra_cup_size
? `${celeb.bra_band_size}${celeb.bra_cup_size} (${celeb.bra_size_system})`
: 'N/A'}
</td>
<td>{celeb.boobs_are_natural === null ? 'N/A' : celeb.boobs_are_natural ? 'Sì' : 'No'}</td>
<td>
<Link to={`/celebrity/${celeb.id}`} className="button-edit">Modifica</Link>
<button onClick={() => handleDelete(celeb.id)} className="button-delete">Elimina</button>
</td>
</tr>
))}
</tbody>
</table>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<h1>Catalogo Celebrità</h1>
<Link to="/celebrity/new" role="button" style={{ marginBottom: '1rem' }}>
+ Aggiungi
</Link>
</div>
{loading && <p aria-busy="true">Caricamento in corso...</p>}
{error && <p>Errore: {error}</p>}
{!loading && (
<figure>
<table>
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">Seno (cm)</th>
<th scope="col">Vita (cm)</th>
<th scope="col">Fianchi (cm)</th>
<th scope="col">Taglia Reggiseno</th>
<th scope="col">Naturali?</th>
<th scope="col">Azioni</th>
</tr>
</thead>
<tbody>
{celebrities.map((celeb) => (
<tr key={celeb.id}>
<td><strong>{celeb.name}</strong></td>
<td>{celeb.bust_cm || 'N/A'}</td>
<td>{celeb.waist_cm || 'N/A'}</td>
<td>{celeb.hips_cm || 'N/A'}</td>
<td>
{celeb.bra_band_size && celeb.bra_cup_size
? `${celeb.bra_band_size}${celeb.bra_cup_size} (${celeb.bra_size_system})`
: 'N/A'}
</td>
<td>{celeb.boobs_are_natural === null ? 'N/A' : celeb.boobs_are_natural ? 'Sì' : 'No'}</td>
<td>
<div role="group" style={{ margin: 0, padding: 0 }}>
<Link to={`/celebrity/${celeb.id}`} role="button" className="outline">Modifica</Link>
<button className="secondary" onClick={() => handleDelete(celeb.id, celeb.name)}>Elimina</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</figure>
)}
</div>
);
}