ImagePick
Picking an image for a face — a studio's logo, a person's photo: the mark as it shows now, a button to add or change it, and once there is one, Remove, which asks first.
A person's photo
import { ImagePick } from "@/components/shared/image-pick";
<ImagePick
mark={<StudioMark name={member.name} logo={photo} tone="plain" />}
has={Boolean(photo)}
onFile={(file) => void pick(file)}
onRemove={() => void remove()}
busy={busy}
labels={labels}
/>Busy
<ImagePick … busy />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mark | ReactNode | — | The face as it shows now: a StudioMark with the image, or the letter in its place. |
| has | boolean | — | There's an image now: Change instead of Add, and Remove. |
| onFile | (file: File) => void | — | Takes the image picked — any but SVG. Shrink and send it (uploadLogo, uploadPhoto). |
| onRemove | () => void | — | Takes the image off, after the confirm. Leave out when it can't be. |
| busy | boolean | false | An image is on its way: the buttons wait. |
| labels | ImagePickLabels | — | Add, Change, Remove, and the confirm's question, body and Cancel. |
Guidelines
- Label it where it sits: a legend in a card (the studio's Logo), a setting's row (your Photo). It brings no label of its own.
- Remove always asks: the face goes back to its letter for everyone who sees it.