{url}

Scansiona o stampa per locandine

); } function EditView() { const [privacy, setPrivacy] = React.useState(PROFILE.privacy); const [coverUrl, setCoverUrl] = React.useState(null); const [avatarUrl, setAvatarUrl] = React.useState(null); const coverRef = React.useRef(null); const avatarRef = React.useRef(null); const onCover = (e) => { const f = e.target.files?.[0]; if (f) setCoverUrl(URL.createObjectURL(f)); }; const onAvatar = (e) => { const f = e.target.files?.[0]; if (f) setAvatarUrl(URL.createObjectURL(f)); }; return (

Foto & copertina

{coverUrl && ( )}

{!avatarUrl && PROFILE.initials}

Copertina JPG o PNG, almeno 1500 × 500 px. Max 5 MB.

Foto profilo Quadrata, almeno 400 × 400 px. Max 2 MB.

Info profilo

Nome d'arte come appare in alto

Handle

Città

Bio 320 caratteri max

</div>
            <div className="pf-form-row">
              <label className="pf-label">Generi</label>
              <div className="pf-chip-input">
                {PROFILE.genres.map(g => (
                  <span key={g} className="pf-chip">
                    {g}
                    <button className="x">×</button>
                  </span>
                ))}
                <button className="pf-chip-add">+ Aggiungi genere</button>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">Cosa cerco</label>
              <div className="pf-chip-input">
                {PROFILE.lookingFor.map(g => (
                  <span key={g} className="pf-chip">
                    {g}
                    <button className="x">×</button>
                  </span>
                ))}
                <button className="pf-chip-add">+ Aggiungi tag</button>
              </div>
            </div>
          </div>
        </section>

<section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">
              Showcase tracks
              <span className="count">{PROFILE.tracks.length} / 6</span>
            </div>
          </header>
          <div className="pf-tracks">
            {PROFILE.tracks.map(t => (
              <div className="pf-track" key={t.id}>
                <div className="pf-track-art">
                  <div className={`grad ${t.grad}`}/>
                  <button className="pf-track-play"><PlayIc size={11}/></button>
                </div>
                <div className="pf-track-info">
                  <div className="pf-track-name">{t.title}</div>
                  <div className="pf-track-meta">
                    <span>{t.duration}</span><span className="sep">·</span>
                    <span>{t.plays} ascolti</span><span className="sep">·</span>
                    <span>{t.uploaded}</span>
                  </div>
                </div>
                <div className="pf-track-plays" style={{ color: "var(--muted-foreground)" }}>Ordina</div>
                <div className="pf-track-actions">
                  <button className="pf-track-icon-btn" title="Modifica"><EditIc size={13}/></button>
                  <button className="pf-track-icon-btn"><DotsIc size={14}/></button>
                </div>
              </div>
            ))}
          </div>
          {PROFILE.tracks.length < 6 && (
            <button className="pf-track-add">
              <PlusIc size={14}/>
              Carica nuova traccia ({6 - PROFILE.tracks.length} slot disponibili)
            </button>
          )}
        </section>

<section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Link social</div>
          </header>
          <div className="pf-form">
            <div className="pf-form-row two">
              <div className="pf-form-row">
                <label className="pf-label">Spotify</label>
                <input className="pf-input" defaultValue={PROFILE.socials.spotify} placeholder="username Spotify"/>
              </div>
              <div className="pf-form-row">
                <label className="pf-label">Instagram</label>
                <input className="pf-input" defaultValue={PROFILE.socials.instagram} placeholder="@username"/>
              </div>
            </div>
            <div className="pf-form-row">
              <label className="pf-label">SoundCloud</label>
              <input className="pf-input" defaultValue={PROFILE.socials.soundcloud} placeholder="username SoundCloud"/>
            </div>
          </div>
        </section>
      </div>

<div className="pf-col">
        <section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Privacy & visibilità</div>
          </header>
          <div className="pf-privacy">
            <div className="meta">
              <div className="t">
                Profilo pubblico
                <span className={`pill ${privacy ? "on" : "off"}`}>{privacy ? "On" : "Off"}</span>
              </div>
              <div className="s">{privacy
                ? "Il tuo profilo appare in ricerche, suggerimenti e directory. Producer possono trovarti e contattarti."
                : "Profilo nascosto. Visibile solo ai producer con cui hai già una chat o un progetto aperto."}
              </div>
            </div>
            <button className={`pf-switch ${privacy ? "on" : ""}`} onClick={() => setPrivacy(!privacy)}/>
          </div>
        </section>

<section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Verifica account</div>
          </header>
          <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--violet-bright,#7b55d0)", fontWeight: 600, fontSize: 14 }}>
              <VerifIc size={16}/> Sei verificato
            </div>
            <p style={{ margin: 0, fontSize: 13, color: "var(--muted-foreground)", lineHeight: 1.5 }}>
              Account verificato il 12 marzo 2025. Il badge ti dà più visibilità in directory e accesso a richieste premium.
            </p>
          </div>
        </section>

<section className="pf-panel">
          <header className="pf-panel-head">
            <div className="pf-panel-title">Condividi profilo</div>
          </header>
          <ShareBlock/>
        </section>
      </div>
    </div>
  );
}

function ProfiloPage() {
  const [mode, setMode] = React.useState("preview");

return (
    <main className="page" data-screen-label="Profilo pubblico">
      <div className="pf-mode-bar">
        <div className="pf-mode-toggle">
          <button className={`pf-mode-btn ${mode === "preview" ? "active" : ""}`} onClick={() => setMode("preview")}>
            <EyeIc size={13}/> Anteprima
          </button>
          <button className={`pf-mode-btn ${mode === "edit" ? "active" : ""}`} onClick={() => setMode("edit")}>
            <EditIc size={13}/> Modifica
          </button>
        </div>
        <div className="pf-mode-actions">
          {mode === "edit" ? (
            <>
              <button className="pf-action-btn">Annulla</button>
              <button className="pf-action-btn primary"><CheckIc size={13}/> Salva modifiche</button>
            </>
          ) : (
            <>
              <button className="pf-action-btn"><ShareIc size={13}/> Condividi</button>
              <button className="pf-action-btn primary" onClick={() => setMode("edit")}><EditIc size={13}/> Modifica profilo</button>
            </>
          )}
        </div>
      </div>

{mode === "preview" ? <PublicView/> : <EditView/>}
    </main>
  );
}

window.ProfiloPage = ProfiloPage;

{PROFILE.name}