gitea/anotherboobsdirectory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrating to pico.css

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/index.html
View File

@@ -1,10 +1,15 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-theme="dark">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title> <!-- 1. Aggiunto il link a Pico.css -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>
<title>Celebrity Catalog</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

42
packages/frontend/src/App.css
View File

@@ -1,42 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

10
packages/frontend/src/App.jsx
View File

@@ -3,19 +3,19 @@
import { Routes, Route } from 'react-router-dom'; import { Routes, Route } from 'react-router-dom';
import CelebrityList from './components/CelebrityList'; import CelebrityList from './components/CelebrityList';
import CelebrityProfile from './components/CelebrityProfile'; import CelebrityProfile from './components/CelebrityProfile';
import CelebrityCreate from './components/CelebrityCreate'; // <-- 1. Importa il nuovo componente import CelebrityCreate from './components/CelebrityCreate';
import './App.css'; // 3. Rimosso App.css
function App() { function App() {
return ( return (
<div className="container"> // 4. Aggiunto il container principale di Pico
<main className="container">
<Routes> <Routes>
<Route path="/" element={<CelebrityList />} /> <Route path="/" element={<CelebrityList />} />
{/* 2. Riattiva questa rotta e puntala al nuovo componente */}
<Route path="/celebrity/new" element={<CelebrityCreate />} /> <Route path="/celebrity/new" element={<CelebrityCreate />} />
<Route path="/celebrity/:id" element={<CelebrityProfile />} /> <Route path="/celebrity/:id" element={<CelebrityProfile />} />
</Routes> </Routes>
</div> </main>
); );
} }

110
packages/frontend/src/components/CelebrityCreate.css
View File

@@ -1,110 +0,0 @@
/* packages/frontend/src/components/CelebrityCreate.css */
.create-form-container {
width: 100%;
max-width: 900px;
margin: 2rem auto;
padding: 2rem;
background-color: #2c2c2c;
border-radius: 8px;
border: 1px solid #444;
}
.create-form-container h2 {
margin-top: 0;
color: #d4b996;
}
.form-section {
margin-bottom: 2rem;
border-top: 1px solid #444;
padding-top: 1.5rem;
}
.form-section h3 {
margin-top: 0;
margin-bottom: 1rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: #ccc;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 0.75rem;
border-radius: 4px;
border: 1px solid #555;
background-color: #1e1e1e;
color: #f0f0f0;
font-size: 1rem;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #646cff;
box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.5);
}
.form-group-checkbox {
margin-top: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.form-group-checkbox input {
width: 18px;
height: 18px;
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 2rem;
border-top: 1px solid #444;
padding-top: 1.5rem;
}
.button-save {
background-color: #28a745;
}
.button-save:hover {
background-color: #218838;
border-color: #1e7e34;
}
.button-save:disabled {
background-color: #555;
cursor: not-allowed;
}
.button-cancel {
background-color: #6c757d;
padding: 0.6em 1.2em; /* Emula lo stile del bottone */
border-radius: 8px;
font-weight: 500;
text-decoration: none;
color: white;
display: inline-block;
border: 1px solid transparent;
}
.button-cancel:hover {
background-color: #5a6268;
border-color: #545b62;
}

154
packages/frontend/src/components/CelebrityCreate.jsx
View File

@@ -1,11 +1,7 @@
// packages/frontend/src/components/CelebrityCreate.jsx import React, { useState } from 'react';
import React, { useState } from 'react'; // <-- ECCO LA CORREZIONE
import { useNavigate, Link } from 'react-router-dom'; import { useNavigate, Link } from 'react-router-dom';
import { createCelebrity } from '../services/api'; import { createCelebrity } from '../services/api';
import './CelebrityCreate.css'; // Stile dedicato per questo form
// Stato iniziale pulito per il form
const initialFormState = { const initialFormState = {
name: '', name: '',
gender: 'female', gender: 'female',
@@ -47,130 +43,92 @@ function CelebrityCreate() {
setError(null); setError(null);
setIsSubmitting(true); setIsSubmitting(true);
// "Pulisce" i dati: converte le stringhe vuote dei campi numerici in `null`
// per evitare errori di validazione nel backend.
const payload = { ...formData }; const payload = { ...formData };
Object.keys(payload).forEach(key => { Object.keys(payload).forEach(key => {
if (payload[key] === '') { if (payload[key] === '') payload[key] = null;
payload[key] = null;
}
}); });
try { try {
await createCelebrity(payload); await createCelebrity(payload);
alert('Celebrità creata con successo!'); navigate('/');
navigate('/'); // Torna alla lista dopo la creazione
} catch (err) { } catch (err) {
setError(err.message); setError(err.message);
} finally { } finally {
setIsSubmitting(false); setIsSubmitting(false);
} }
}; };
return ( return (
<div className="create-form-container"> <article>
<h2>Aggiungi Nuova Celebrità</h2> <h2>Aggiungi Nuova Celebrità</h2>
<p>Compila i campi sottostanti per aggiungere un nuovo profilo al catalogo.</p> <p>Compila i campi sottostanti per aggiungere un nuovo profilo al catalogo.</p>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="form-section"> <fieldset>
<h3>Anagrafica</h3> <legend>Anagrafica</legend>
<div className="form-grid"> <div className="grid">
<div className="form-group"> <label>
<label>Nome *</label> Nome *
<input type="text" name="name" value={formData.name} onChange={handleChange} required /> <input type="text" name="name" value={formData.name} onChange={handleChange} required />
</label>
<label>
Genere
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="female">Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
</label>
</div> </div>
<div className="form-group"> <div className="grid">
<label>Genere</label> <label>Data di Nascita<input type="date" name="birth_date" value={formData.birth_date} onChange={handleChange} /></label>
<select name="gender" value={formData.gender} onChange={handleChange}> <label>Luogo di Nascita<input type="text" name="birth_place" value={formData.birth_place} onChange={handleChange} /></label>
<option value="female">Female</option> <label>Nazionalità<input type="text" name="nationality" value={formData.nationality} onChange={handleChange} /></label>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
</div> </div>
<div className="form-group"> </fieldset>
<label>Data di Nascita</label>
<input type="date" name="birth_date" value={formData.birth_date} onChange={handleChange} />
</div>
<div className="form-group">
<label>Luogo di Nascita</label>
<input type="text" name="birth_place" value={formData.birth_place} onChange={handleChange} />
</div>
<div className="form-group">
<label>Nazionalità</label>
<input type="text" name="nationality" value={formData.nationality} onChange={handleChange} />
</div>
</div>
</div>
<div className="form-section"> <fieldset>
<h3>Misure e Aspetto</h3> <legend>Misure e Aspetto</legend>
<div className="form-grid"> <div className="grid">
<div className="form-group"> <label>Altezza (cm)<input type="number" name="height_cm" value={formData.height_cm} onChange={handleChange} /></label>
<label>Altezza (cm)</label> <label>Peso (kg)<input type="number" name="weight_kg" value={formData.weight_kg} onChange={handleChange} /></label>
<input type="number" name="height_cm" value={formData.height_cm} onChange={handleChange} /> <label>Seno (cm)<input type="number" name="bust_cm" value={formData.bust_cm} onChange={handleChange} /></label>
</div>
<div className="form-group">
<label>Peso (kg)</label>
<input type="number" name="weight_kg" value={formData.weight_kg} onChange={handleChange} />
</div>
<div className="form-group">
<label>Seno (cm)</label>
<input type="number" name="bust_cm" value={formData.bust_cm} onChange={handleChange} />
</div>
<div className="form-group">
<label>Vita (cm)</label>
<input type="number" name="waist_cm" value={formData.waist_cm} onChange={handleChange} />
</div>
<div className="form-group">
<label>Fianchi (cm)</label>
<input type="number" name="hips_cm" value={formData.hips_cm} onChange={handleChange} />
</div>
<div className="form-group">
<label>Colore Capelli</label>
<input type="text" name="hair_color" value={formData.hair_color} onChange={handleChange} />
</div>
<div className="form-group">
<label>Colore Occhi</label>
<input type="text" name="eye_color" value={formData.eye_color} onChange={handleChange} />
</div>
</div> </div>
</div> <div className="grid">
<label>Vita (cm)<input type="number" name="waist_cm" value={formData.waist_cm} onChange={handleChange} /></label>
<label>Fianchi (cm)<input type="number" name="hips_cm" value={formData.hips_cm} onChange={handleChange} /></label>
<label>Colore Capelli<input type="text" name="hair_color" value={formData.hair_color} onChange={handleChange} /></label>
<label>Colore Occhi<input type="text" name="eye_color" value={formData.eye_color} onChange={handleChange} /></label>
</div>
</fieldset>
<div className="form-section"> <fieldset>
<h3>Reggiseno</h3> <legend>Reggiseno</legend>
<div className="form-grid"> <div className="grid">
<div className="form-group"> <label>Misura Fascia<input type="number" name="bra_band_size" value={formData.bra_band_size} onChange={handleChange} /></label>
<label>Misura Fascia</label> <label>Coppa<input type="text" name="bra_cup_size" value={formData.bra_cup_size} onChange={handleChange} /></label>
<input type="number" name="bra_band_size" value={formData.bra_band_size} onChange={handleChange} /> <label>Sistema
</div>
<div className="form-group">
<label>Coppa</label>
<input type="text" name="bra_cup_size" value={formData.bra_cup_size} onChange={handleChange} />
</div>
<div className="form-group">
<label>Sistema</label>
<select name="bra_size_system" value={formData.bra_size_system} onChange={handleChange}> <select name="bra_size_system" value={formData.bra_size_system} onChange={handleChange}>
<option value="US">US</option> <option value="UK">UK</option> <option value="EU">EU</option> <option value="FR">FR</option> <option value="US">US</option> <option value="UK">UK</option> <option value="EU">EU</option> <option value="FR">FR</option>
<option value="AU">AU</option> <option value="IT">IT</option> <option value="JP">JP</option> <option value="AU">AU</option> <option value="IT">IT</option> <option value="JP">JP</option>
</select> </select>
</div> </label>
</div> </div>
<div className="form-group-checkbox"> <label>
<label>Seno Naturale?</label>
<input type="checkbox" name="boobs_are_natural" checked={formData.boobs_are_natural} onChange={handleChange} /> <input type="checkbox" name="boobs_are_natural" checked={formData.boobs_are_natural} onChange={handleChange} />
</div> Seno Naturale?
</div> </label>
</fieldset>
{error && <p className="error-message">Errore: {error}</p>} {error && <p><strong>Errore:</strong> {error}</p>}
<div className="form-actions"> <div className="grid">
<Link to="/" className="button-cancel">Annulla</Link> <Link to="/" role="button" className="secondary">Annulla</Link>
<button type="submit" className="button-save" disabled={isSubmitting}> <button type="submit" disabled={isSubmitting} aria-busy={isSubmitting}>
{isSubmitting ? 'Salvataggio...' : 'Salva Profilo'} {isSubmitting ? 'Salvataggio...' : 'Salva Profilo'}
</button> </button>
</div> </div>
</form> </form>
</div> </article>
); );
} }

94
packages/frontend/src/components/CelebrityList.jsx
View File

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

138
packages/frontend/src/components/CelebrityProfile.css
View File

@@ -1,138 +0,0 @@
/* packages/frontend/src/components/CelebrityProfile.css */
.profile-container {
display: flex;
gap: 2rem;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.profile-sidebar {
flex: 0 0 300px; /* Larghezza fissa per la colonna sinistra */
}
.profile-main-image {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 1rem;
border: 1px solid #444;
}
.thumbnails {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.thumbnail img {
width: 100%;
border-radius: 4px;
border: 1px solid #444;
}
.profile-content {
flex-grow: 1;
}
.profile-header {
border-bottom: 1px solid #555;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.profile-header h1 {
margin: 0;
font-size: 2.5rem;
color: #f0e6d2;
}
.profile-header .editable-field {
margin-top: 0.5rem;
}
.profile-section {
background-color: #2c2c2c;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid #444;
}
.profile-section h2 {
margin-top: 0;
border-bottom: 1px solid #555;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
color: #d4b996;
}
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* Stile per i campi editabili */
.editable-field {
padding: 8px;
border-radius: 4px;
transition: background-color 0.2s ease-in-out;
cursor: pointer;
}
.editable-field:hover {
background-color: #3a3a3a;
}
.field-label {
display: block;
font-size: 0.8rem;
color: #aaa;
margin-bottom: 4px;
text-transform: uppercase;
}
.field-value {
font-size: 1rem;
font-weight: 500;
color: #fff;
}
.editable-field input,
.editable-field select,
.editable-field textarea {
width: 100%;
padding: 6px;
font-size: 1rem;
border: 1px solid #646cff;
border-radius: 4px;
background-color: #1a1a1a;
color: #fff;
box-sizing: border-box; /* Assicura che padding non alteri la larghezza */
}
.profile-actions {
margin-top: 2rem;
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.button-delete {
background-color: #b22222;
color: white;
}
.button-delete:hover {
background-color: #dc143c;
border-color: #dc143c;
}
.button-back {
background-color: #444;
}
.button-back:hover {
background-color: #555;
border-color: #666;
}

114
packages/frontend/src/components/CelebrityProfile.jsx
View File

@@ -4,7 +4,6 @@ import React, { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom'; import { useParams, useNavigate, Link } from 'react-router-dom';
import { getCelebrityById, updateCelebrity, deleteCelebrity } from '../services/api'; import { getCelebrityById, updateCelebrity, deleteCelebrity } from '../services/api';
import EditableField from './EditableField'; import EditableField from './EditableField';
import './CelebrityProfile.css'; // Importa il nuovo CSS
function CelebrityProfile() { function CelebrityProfile() {
const { id } = useParams(); const { id } = useParams();
@@ -14,12 +13,10 @@ function CelebrityProfile() {
const [error, setError] = useState(null); const [error, setError] = useState(null);
useEffect(() => { useEffect(() => {
// Ignoriamo la modalità "new", questa pagina è solo per visualizzare/modificare
if (id) { if (id) {
setLoading(true); setLoading(true);
getCelebrityById(id) getCelebrityById(id)
.then((data) => { .then((data) => {
// Formatta la data per l'input type="date"
if (data.birth_date) { if (data.birth_date) {
data.birth_date = data.birth_date.split('T')[0]; data.birth_date = data.birth_date.split('T')[0];
} }
@@ -28,23 +25,19 @@ function CelebrityProfile() {
.catch((err) => setError(err.message)) .catch((err) => setError(err.message))
.finally(() => setLoading(false)); .finally(() => setLoading(false));
} else { } else {
navigate('/'); // Se non c'è id, torna alla home navigate('/');
} }
}, [id, navigate]); }, [id, navigate]);
const handleFieldSave = async (fieldName, newValue) => { const handleFieldSave = async (fieldName, newValue) => {
// Converte stringa vuota a null per il backend
const valueToSend = newValue === '' ? null : newValue; const valueToSend = newValue === '' ? null : newValue;
const payload = { [fieldName]: valueToSend }; const payload = { [fieldName]: valueToSend };
try { try {
const updatedCelebrity = await updateCelebrity(id, payload); await updateCelebrity(id, payload);
// Aggiorna lo stato locale per un feedback immediato
setCelebrity((prev) => ({ ...prev, [fieldName]: newValue })); setCelebrity((prev) => ({ ...prev, [fieldName]: newValue }));
console.log('Salvataggio riuscito:', updatedCelebrity);
} catch (err) { } catch (err) {
setError(`Errore durante il salvataggio del campo ${fieldName}: ${err.message}`); setError(`Errore durante il salvataggio: ${err.message}`);
// Potresti voler ripristinare il valore precedente in caso di errore
} }
}; };
@@ -52,7 +45,6 @@ function CelebrityProfile() {
if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) { if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) {
try { try {
await deleteCelebrity(id); await deleteCelebrity(id);
alert(`${celebrity.name} è stato eliminato con successo.`);
navigate('/'); navigate('/');
} catch (err) { } catch (err) {
setError(`Errore durante l'eliminazione: ${err.message}`); setError(`Errore durante l'eliminazione: ${err.message}`);
@@ -60,87 +52,73 @@ function CelebrityProfile() {
} }
}; };
if (loading) return <p>Caricamento profilo...</p>; if (loading) return <article aria-busy="true">Caricamento profilo...</article>;
if (error) return <p className="error-message">Errore: {error}</p>; if (error) return <article><p className="error-message">Errore: {error}</p></article>;
if (!celebrity) return <p>Nessuna celebrità trovata.</p>; if (!celebrity) return <p>Nessuna celebrità trovata.</p>;
// Opzioni per i campi <select> const genderOptions = [ { value: 'female', label: 'Female' }, { value: 'male', label: 'Male' }, { value: 'other', label: 'Other' } ];
const genderOptions = [ const braSystemOptions = [ { value: 'US', label: 'US' }, { value: 'UK', label: 'UK' }, { value: 'EU', label: 'EU' }, { value: 'FR', label: 'FR' }, { value: 'AU', label: 'AU' }, { value: 'IT', label: 'IT' }, { value: 'JP', label: 'JP' }];
{ value: 'female', label: 'Female' }, { value: 'male', label: 'Male' }, { value: 'other', label: 'Other' }, const booleanOptions = [ { value: 'true', label: 'Sì' }, { value: 'false', label: 'No' }];
];
const braSystemOptions = [
{ value: 'US', label: 'US' }, { value: 'UK', label: 'UK' }, { value: 'EU', label: 'EU' },
{ value: 'FR', label: 'FR' }, { value: 'AU', label: 'AU' }, { value: 'IT', label: 'IT' }, { value: 'JP', label: 'JP' },
];
const booleanOptions = [
{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' },
];
return ( return (
<div className="profile-container"> <div className="grid">
<div className="profile-sidebar"> <aside>
{/* Immagine del profilo (placeholder) */} <figure>
<img src={`https://i.pravatar.cc/300?u=${id}`} alt={celebrity.name} className="profile-main-image" /> <img src={`https://i.pravatar.cc/400?u=${id}`} alt={celebrity.name} style={{ width: '100%' }} />
<div className="thumbnails"> <figcaption>{celebrity.name}</figcaption>
{/* Placeholder per le miniature */} </figure>
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}a`} alt="thumbnail" /></div> </aside>
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}b`} alt="thumbnail" /></div>
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}c`} alt="thumbnail" /></div>
</div>
</div>
<div className="profile-content"> <section>
<div className="profile-header"> <article>
<h1>{celebrity.name}</h1> <header>
<EditableField label="Nome completo / Alias" name="name" value={celebrity.name} onSave={handleFieldSave} /> <h2>{celebrity.name}</h2>
</div> <EditableField label="Nome completo / Alias" name="name" value={celebrity.name} onSave={handleFieldSave} />
</header>
<section className="profile-section"> <h3>Dati Personali</h3>
<h2>Dati Personali</h2> <div className="grid">
<div className="profile-grid">
<EditableField label="Data di nascita" name="birth_date" value={celebrity.birth_date} type="date" onSave={handleFieldSave} /> <EditableField label="Data di nascita" name="birth_date" value={celebrity.birth_date} type="date" onSave={handleFieldSave} />
<EditableField label="Luogo di nascita" name="birth_place" value={celebrity.birth_place} onSave={handleFieldSave} /> <EditableField label="Luogo di nascita" name="birth_place" value={celebrity.birth_place} onSave={handleFieldSave} />
<EditableField label="Nazionalità" name="nationality" value={celebrity.nationality} onSave={handleFieldSave} /> <EditableField label="Nazionalità" name="nationality" value={celebrity.nationality} onSave={handleFieldSave} />
<EditableField label="Etnia" name="ethnicity" value={celebrity.ethnicity} onSave={handleFieldSave} /> </div>
<div className="grid">
<EditableField label="Genere" name="gender" value={celebrity.gender} type="select" options={genderOptions} onSave={handleFieldSave} /> <EditableField label="Genere" name="gender" value={celebrity.gender} type="select" options={genderOptions} onSave={handleFieldSave} />
<EditableField label="Etnia" name="ethnicity" value={celebrity.ethnicity} onSave={handleFieldSave} />
<EditableField label="Sessualità" name="sexuality" value={celebrity.sexuality} onSave={handleFieldSave} /> <EditableField label="Sessualità" name="sexuality" value={celebrity.sexuality} onSave={handleFieldSave} />
</div> </div>
</section> <hr/>
<h3>Aspetto Fisico</h3>
<section className="profile-section"> <div className="grid">
<h2>Aspetto Fisico</h2>
<div className="profile-grid">
<EditableField label="Colore Capelli" name="hair_color" value={celebrity.hair_color} onSave={handleFieldSave} />
<EditableField label="Colore Occhi" name="eye_color" value={celebrity.eye_color} onSave={handleFieldSave} />
<EditableField label="Altezza (cm)" name="height_cm" value={celebrity.height_cm} type="number" onSave={handleFieldSave} /> <EditableField label="Altezza (cm)" name="height_cm" value={celebrity.height_cm} type="number" onSave={handleFieldSave} />
<EditableField label="Peso (kg)" name="weight_kg" value={celebrity.weight_kg} type="number" onSave={handleFieldSave} /> <EditableField label="Peso (kg)" name="weight_kg" value={celebrity.weight_kg} type="number" onSave={handleFieldSave} />
<EditableField label="Colore Capelli" name="hair_color" value={celebrity.hair_color} onSave={handleFieldSave} />
<EditableField label="Colore Occhi" name="eye_color" value={celebrity.eye_color} onSave={handleFieldSave} />
</div>
<div className="grid">
<EditableField label="Seno (cm)" name="bust_cm" value={celebrity.bust_cm} type="number" onSave={handleFieldSave} /> <EditableField label="Seno (cm)" name="bust_cm" value={celebrity.bust_cm} type="number" onSave={handleFieldSave} />
<EditableField label="Vita (cm)" name="waist_cm" value={celebrity.waist_cm} type="number" onSave={handleFieldSave} /> <EditableField label="Vita (cm)" name="waist_cm" value={celebrity.waist_cm} type="number" onSave={handleFieldSave} />
<EditableField label="Fianchi (cm)" name="hips_cm" value={celebrity.hips_cm} type="number" onSave={handleFieldSave} /> <EditableField label="Fianchi (cm)" name="hips_cm" value={celebrity.hips_cm} type="number" onSave={handleFieldSave} />
</div> </div>
</section> <hr/>
<h3>Reggiseno</h3>
<section className="profile-section"> <div className="grid">
<h2>Reggiseno</h2>
<div className="profile-grid">
<EditableField label="Misura Fascia" name="bra_band_size" value={celebrity.bra_band_size} type="number" onSave={handleFieldSave} /> <EditableField label="Misura Fascia" name="bra_band_size" value={celebrity.bra_band_size} type="number" onSave={handleFieldSave} />
<EditableField label="Coppa" name="bra_cup_size" value={celebrity.bra_cup_size} onSave={handleFieldSave} /> <EditableField label="Coppa" name="bra_cup_size" value={celebrity.bra_cup_size} onSave={handleFieldSave} />
<EditableField label="Sistema" name="bra_size_system" value={celebrity.bra_size_system} type="select" options={braSystemOptions} onSave={handleFieldSave} /> <EditableField label="Sistema" name="bra_size_system" value={celebrity.bra_size_system} type="select" options={braSystemOptions} onSave={handleFieldSave} />
<EditableField label="Seno Naturale?" name="boobs_are_natural" value={String(celebrity.boobs_are_natural)} type="select" options={booleanOptions} onSave={handleFieldSave} /> <EditableField label="Seno Naturale?" name="boobs_are_natural" value={String(celebrity.boobs_are_natural)} type="select" options={booleanOptions} onSave={handleFieldSave} />
</div> </div>
</section> <hr/>
<h3>Biografia</h3>
<section className="profile-section">
<h2>Biografia</h2>
<EditableField label="Note biografiche" name="biography" value={celebrity.biography} type="textarea" onSave={handleFieldSave} /> <EditableField label="Note biografiche" name="biography" value={celebrity.biography} type="textarea" onSave={handleFieldSave} />
</section> <footer>
<div className="grid">
<div className="profile-actions"> <Link to="/" role="button" className="secondary outline">Torna alla Lista</Link>
<Link to="/" className="button-back">Torna alla Lista</Link> <button onClick={handleDelete} className="secondary">Elimina Profilo</button>
<button onClick={handleDelete} className="button-delete">Elimina Profilo</button> </div>
</div> </footer>
</div> </article>
</section>
</div> </div>
); );
} }

68
packages/frontend/src/index.css
View File

@@ -1,68 +0,0 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

6
packages/frontend/src/main.jsx
View File

@@ -1,12 +1,12 @@
import { StrictMode } from 'react'; import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; // <-- Importa import { BrowserRouter } from 'react-router-dom';
import './index.css'; // 2. Rimosso l'import di index.css, ora gestito da Pico
import App from './App.jsx'; import App from './App.jsx';
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
<StrictMode> <StrictMode>
<BrowserRouter> {/* <-- Avvolgi l'App con il Router */} <BrowserRouter>
<App /> <App />
</BrowserRouter> </BrowserRouter>
</StrictMode> </StrictMode>