import {useState} from “react”; export default function inboxZero ({ inboxCount, initialPhoto = null, SavePhoto }) { const [photo, setPhoto] = useState (initialPhoto); async function uploadPhoto (event) { const file = event.target .files?. [0]; If (! file) return; const allowed = [ “image/jpeg”, “image/png”, “image/webp” ]; If (! allowed.includes (file.type)) { alert (“Image format not accepted. “); return; } if (file.size > 5 1024 1024) { alert (“Maximum 5 MB. “); return; } //SavePhoto should upload the image to //a private storage associated with the user. const url = await SavePhoto (file); setPhoto (url); } if (inboxCount! == 0) return null; Return ( <main className="inbox-zero"> <h1>✨ Inbox Zero!</h1> <p>Everything is up to date. Enjoy the moment.</p> {photo & ( <img src= {photo} alt="My custom photo” style= {{ width: "100% “, Max Width: 700, Max height: 450, objectFit: “contain”, BorderRadius: 16 }} />/ )} <label> Choose my photo <input type="file” accept="image/png, image/jpeg, image/webp” onChange= {uploadPhoto} />/</label> </main> ); }