feat(image): use image upload field in blog

src/pages/write/index.tsx

@@ -7,7 +7,8 @@ import {
 } from 'react-router-dom'
 import {
   CheckboxFieldUncontrolled,
-  InputFieldUncontrolled
+  InputFieldUncontrolled,
+  InputFieldWithImageUpload
 } from '../../components/Inputs'
 import { ProfileSection } from '../../components/ProfileSection'
 import { useAppSelector } from '../../hooks'
@@ -29,8 +30,11 @@ export const WritePage = () => {
   const blog = data?.blog
   const title = data?.blog ? 'Edit blog post' : 'Submit a blog post'
   const [content, setContent] = useState(blog?.content || '')
+  const [featuredImageUrl, setfeaturedImageUrl] = useState(blog?.image || '')
+
   const formRef = useRef<HTMLFormElement>(null)
   const editorRef = useRef<EditorRef>(null)
+
   const [showConfirmPopup, setShowConfirmPopup] = useState<boolean>(false)
   const handleReset = () => {
     setShowConfirmPopup(true)
@@ -97,12 +101,14 @@ export const WritePage = () => {
                     readOnly
                   />
                 </div>
-                <InputFieldUncontrolled
+                <InputFieldWithImageUpload
                   label='Featured Image URL'
-                  name='image'
                   inputMode='url'
-                  defaultValue={blog?.image}
+                  placeholder='Image URL'
+                  name='featuredImageUrl'
+                  value={featuredImageUrl}
                   error={formErrors?.image}
+                  onChange={(_, value) => setfeaturedImageUrl(value)}
                 />
                 <InputFieldUncontrolled
                   label='Summary'