https://app.insomnia.rest/assets/upload-picture-B1Z4YPTg.js

1import{r as a,j as e}from"./jsx-runtime-Dt5Dsy05.js";import{p as h}from"./index-6cgge6b1.js";import{F as g}from"./index-C63jUOGq.js";import{$ as b}from"./Button-CvYW20f_.js";import{g as j}from"./remix-utils-qD3iEUI4.js";import{S as w}from"./secondary-button-dAshlNoR.js";import{a as y}from"./components-ZktkP2zq.js";const N=1048576,C=({picture:o,style:m})=>{const s=y(),l=s.state!=="idle",c=a.useRef(null),[f,p]=a.useState(o),[n,i]=a.useState(""),[u,d]=a.useState(!1),x=t=>{if(!t.target.files||t.target.files.length===0)return;const r=t.target.files[0];p(URL.createObjectURL(r)),d(!0),r.size>N?i("File size should not exceed 1MB"):i("")};return a.useEffect(()=>{const{ok:t,error:r}=j({data:s.data,state:s.state});r?i(r):t&&d(!1)},[s.data,s.state,o]),e.jsxs("div",{className:"flex flex-col",style:m,children:[e.jsx(s.Form,{method:"POST",encType:"multipart/form-data",children:e.jsxs("div",{className:"flex flex-col items-center",children:[e.jsxs("div",{className:"relative m-auto h-[65px] w-[65px] rounded-full border border-gray-300 bg-white p-[2px] shadow-sm",children:[e.jsx("img",{src:f,alt:"avatar",width:65,height:65,className:"aspect-square rounded-full"}),e.jsxs("div",{className:"absolute bottom-0 right-0 h-[20px] w-[20px] rounded-full border border-gray-300 bg-white shadow-sm",children:[e.jsx("input",{ref:c,hidden:!0,type:"file",name:"file",accept:"image/*",onChange:x}),e.jsx(b,{"aria-label":"edit-picture",onPress:()=>{var t;return(t=c.current)==null?void 0:t.click()},isDisabled:l,className:"flex h-full w-full items-center justify-center",children:e.jsx(g,{icon:h,className:"h-[14px] w-[14px] text-gray-600"})})]})]}),e.jsx(w,{name:"action",value:"update-picture",type:"submit",loading:l,isDisabled:!u,className:"mt-[10px] w-[100px]",children:"Change"})]})}),n&&e.jsx("span",{id:"component-helper-text",className:"text-error",children:n})]})};export{C as U};
2//# sourceMappingURL=upload-picture-B1Z4YPTg.js.map