@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.53 kB
JavaScript
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as i}from"react";import t from"@mui/material/Typography";import r from"@mui/material/Box";import a from"@mui/material/DialogContent";import p from"@mui/material/Alert";import l from"@mui/material/Snackbar";import{uploadStyles as m}from"./ImageUpload.styles.js";import{FileDragDrop as n}from"../../FileDragDrop/FileDragDrop.container.js";const c=({currentImage:c,onImageChange:g,t:d,...s})=>{const[f,u]=i();return e(a,{...s,"data-testid":"image-upload-root",children:[o(r,{sx:m.initialImageWrapper,children:"string"==typeof c?o("img",{width:"100%",height:"auto",src:c,alt:"Thumbnail of selected",style:{display:"block"},"data-testid":"ImageUpload-initialImage-wrapper"}):c}),o(n,{sx:{mt:10},label:d("Upload your {{0}}",{0:"Application Form"}),buttonLabel:d("Upload a photo"),dropZoneDescription:d("or drag and drop a photo here"),t:d,dropZoneOptions:{accept:{"image/jpeg":[".jpg",".jpeg"],"image/png":[".png"],"image/gif":[".gif"]},noClick:!0,maxFiles:1,maxSize:2097152,multiple:!1,onDropAccepted:e=>{g(e[0])},onDropRejected:()=>{u(d("AcceptedFileTypeSizeMB",{0:"jpg, png, gif",1:2}))}}}),o(t,{variant:"caption",sx:{mt:2,color:"text.secondary"},children:d("AcceptedFileTypeSizeMB",{0:"jpg, png, gif",1:2})}),o(l,{open:!!f,anchorOrigin:{vertical:"bottom",horizontal:"left"},autoHideDuration:5e3,onClose:()=>u(""),sx:{"& .MuiAlert-icon":{alignItems:"center"}},children:o(p,{severity:"error",variant:"filled",onClose:()=>u(""),children:f})})]})};export{c as default};