43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import SlideOver from "../slideOvers/SlideOver";
|
|
import { useState } from "react";
|
|
import UploadDocument from "./UploadDocument";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface Props {
|
|
title: string;
|
|
initialImage?: string;
|
|
onLoaded: (image: string, file: File) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function UploadImage({ title = "", initialImage, onLoaded, onClose }: Props) {
|
|
const { t } = useTranslation();
|
|
const [image, setImage] = useState(initialImage);
|
|
|
|
function onChange(base64: string, file: File) {
|
|
setImage(base64);
|
|
onLoaded(base64, file);
|
|
onClose();
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<SlideOver
|
|
onClose={onClose}
|
|
title={title}
|
|
content={
|
|
<div className="space-y-2">
|
|
<UploadDocument accept="image/png, image/jpg, image/jpeg" description={title} onDropped={onChange} />
|
|
{image && (
|
|
// Subframe-style preview hull: rounded-lg, solid border-default, neutral-primary fill.
|
|
<div className="border-border-default bg-surface-neutral-primary overflow-hidden rounded-lg border border-solid">
|
|
<img className="h-auto w-full" alt={t("shared.uploadedImageAlt")} src={image} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
></SlideOver>
|
|
</div>
|
|
);
|
|
}
|