101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
import './upload-modal.css';
|
|
|
|
import ModalOverlay from '../modal-overlay/modal-overlay';
|
|
|
|
type Props = {
|
|
onClose: () => void;
|
|
onSelectFile: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
onChooseCamera: () => void;
|
|
};
|
|
|
|
export default function UploadModal(props: Props) {
|
|
return (
|
|
<div className="upload-modal">
|
|
<ModalOverlay onClick={props.onClose}/>
|
|
|
|
<ul className="upload-modal__menu">
|
|
<li>
|
|
<div onClick={props.onChooseCamera}>
|
|
Take Photo
|
|
<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient
|
|
id="gradient_svg"
|
|
x1="11.1879"
|
|
y1="1"
|
|
x2="11.1879"
|
|
y2="18"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FDDAA6"></stop>
|
|
<stop offset="1" stopColor="#DEB475"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
d="M11.8799 15.6202C14.8844 15.6202 17.3199 13.1847 17.3199 10.1802C17.3199 7.17581 14.8844 4.74023 11.8799 4.74023C8.87551 4.74023 6.43994 7.17581 6.43994 10.1802C6.43994 13.1847 8.87551 15.6202 11.8799 15.6202Z"
|
|
stroke="#121620"
|
|
strokeMiterlimit="10"
|
|
></path>
|
|
<path
|
|
d="M8.47998 10.1793C8.47998 8.2753 9.97598 6.7793 11.88 6.7793"
|
|
stroke="#121620"
|
|
strokeMiterlimit="10"
|
|
strokeLinecap="round"
|
|
></path>
|
|
<path
|
|
d="M18.068 4.604L15.416 1H8.344L5.692 4.604H1V18H22.76V4.604H18.068Z"
|
|
stroke="#121620"
|
|
strokeMiterlimit="10"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
></path>
|
|
<path
|
|
d="M4.33186 2.56445H2.35986"
|
|
stroke="#121620"
|
|
strokeMiterlimit="10"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<input
|
|
id="upload-input"
|
|
type="file"
|
|
accept="image/*"
|
|
style={{ display: 'none' }}
|
|
onChange={props.onSelectFile}
|
|
/>
|
|
|
|
<label htmlFor="upload-input">
|
|
Choose File
|
|
<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient
|
|
id="gradient_svg"
|
|
x1="11.1879"
|
|
y1="1"
|
|
x2="11.1879"
|
|
y2="18"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stopColor="#FDDAA6"></stop>
|
|
<stop offset="1" stopColor="#DEB475"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
d="M2.81178 17.9977H22.5658V5.59397C22.5658 5.08863 22.1524 4.67517 21.6471 4.67517H5.10877C4.60343 4.67517 4.18997 5.08863 4.18997 5.59397V16.5276C4.18997 17.2626 3.6387 17.9517 2.90367 17.9977C2.12269 18.0436 1.43359 17.4005 1.43359 16.6195V1.91879C1.43359 1.41346 1.84705 1 2.35239 1H8.32455L9.70274 2.37819H20.2689V3.75638"
|
|
stroke="#121620"
|
|
strokeMiterlimit="10"
|
|
strokeLinejoin="round"
|
|
></path>
|
|
</svg>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|