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) {

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>

);

}