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

11
packages/frontend/index.html
View File

@@ -1,13 +1,18 @@
<!doctype html>
<html lang="en">
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<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>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
</html>

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

94
packages/frontend/src/components/CelebrityList.jsx
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>
);
}

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;
}

118
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 { getCelebrityById, updateCelebrity, deleteCelebrity } from '../services/api';
import EditableField from './EditableField';
import './CelebrityProfile.css'; // Importa il nuovo CSS
function CelebrityProfile() {
const { id } = useParams();
@@ -14,12 +13,10 @@ function CelebrityProfile() {
const [error, setError] = useState(null);
useEffect(() => {
// Ignoriamo la modalità "new", questa pagina è solo per visualizzare/modificare
if (id) {
setLoading(true);
getCelebrityById(id)
.then((data) => {
// Formatta la data per l'input type="date"
if (data.birth_date) {
data.birth_date = data.birth_date.split('T')[0];
}
@@ -28,23 +25,19 @@ function CelebrityProfile() {
.catch((err) => setError(err.message))
.finally(() => setLoading(false));
} else {
navigate('/'); // Se non c'è id, torna alla home
navigate('/');
}
}, [id, navigate]);
const handleFieldSave = async (fieldName, newValue) => {
// Converte stringa vuota a null per il backend
const valueToSend = newValue === '' ? null : newValue;
const payload = { [fieldName]: valueToSend };
try {
const updatedCelebrity = await updateCelebrity(id, payload);
// Aggiorna lo stato locale per un feedback immediato
await updateCelebrity(id, payload);
setCelebrity((prev) => ({ ...prev, [fieldName]: newValue }));
console.log('Salvataggio riuscito:', updatedCelebrity);
} catch (err) {
setError(`Errore durante il salvataggio del campo ${fieldName}: ${err.message}`);
// Potresti voler ripristinare il valore precedente in caso di errore
setError(`Errore durante il salvataggio: ${err.message}`);
}
};
@@ -52,95 +45,80 @@ function CelebrityProfile() {
if (window.confirm(`Sei sicuro di voler eliminare ${celebrity.name}? L'azione è irreversibile.`)) {
try {
await deleteCelebrity(id);
alert(`${celebrity.name} è stato eliminato con successo.`);
navigate('/');
} catch (err) {
setError(`Errore durante l'eliminazione: ${err.message}`);
}
}
};
if (loading) return <p>Caricamento profilo...</p>;
if (error) return <p className="error-message">Errore: {error}</p>;
if (loading) return <article aria-busy="true">Caricamento profilo...</article>;
if (error) return <article><p className="error-message">Errore: {error}</p></article>;
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 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' },
];
const genderOptions = [ { value: 'female', label: 'Female' }, { value: 'male', label: 'Male' }, { value: 'other', label: 'Other' } ];
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 (
<div className="profile-container">
<div className="profile-sidebar">
{/* Immagine del profilo (placeholder) */}
<img src={`https://i.pravatar.cc/300?u=${id}`} alt={celebrity.name} className="profile-main-image" />
<div className="thumbnails">
{/* Placeholder per le miniature */}
<div className="thumbnail"><img src={`https://i.pravatar.cc/150?u=${id}a`} alt="thumbnail" /></div>
<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="grid">
<aside>
<figure>
<img src={`https://i.pravatar.cc/400?u=${id}`} alt={celebrity.name} style={{ width: '100%' }} />
<figcaption>{celebrity.name}</figcaption>
</figure>
</aside>
<div className="profile-content">
<div className="profile-header">
<h1>{celebrity.name}</h1>
<EditableField label="Nome completo / Alias" name="name" value={celebrity.name} onSave={handleFieldSave} />
</div>
<section className="profile-section">
<h2>Dati Personali</h2>
<div className="profile-grid">
<section>
<article>
<header>
<h2>{celebrity.name}</h2>
<EditableField label="Nome completo / Alias" name="name" value={celebrity.name} onSave={handleFieldSave} />
</header>
<h3>Dati Personali</h3>
<div className="grid">
<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="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="Etnia" name="ethnicity" value={celebrity.ethnicity} onSave={handleFieldSave} />
<EditableField label="Sessualità" name="sexuality" value={celebrity.sexuality} onSave={handleFieldSave} />
</div>
</section>
<section className="profile-section">
<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} />
<hr/>
<h3>Aspetto Fisico</h3>
<div className="grid">
<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="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="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} />
</div>
</section>
<section className="profile-section">
<h2>Reggiseno</h2>
<div className="profile-grid">
<hr/>
<h3>Reggiseno</h3>
<div className="grid">
<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="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} />
</div>
</section>
<section className="profile-section">
<h2>Biografia</h2>
<hr/>
<h3>Biografia</h3>
<EditableField label="Note biografiche" name="biography" value={celebrity.biography} type="textarea" onSave={handleFieldSave} />
</section>
<div className="profile-actions">
<Link to="/" className="button-back">Torna alla Lista</Link>
<button onClick={handleDelete} className="button-delete">Elimina Profilo</button>
</div>
</div>
<footer>
<div className="grid">
<Link to="/" role="button" className="secondary outline">Torna alla Lista</Link>
<button onClick={handleDelete} className="secondary">Elimina Profilo</button>
</div>
</footer>
</article>
</section>
</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 { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'; // <-- Importa
import './index.css';
import { BrowserRouter } from 'react-router-dom';
// 2. Rimosso l'import di index.css, ora gestito da Pico
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter> {/* <-- Avvolgi l'App con il Router */}
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>