From 4c410be9ba115a8a42f73500d118678ae86a74f8 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 7 Jan 2025 09:49:02 +0100
Subject: [PATCH] feat(image): use image upload field

---
 src/components/ModForm.tsx | 9 +++++----
 src/pages/write/index.tsx  | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx
index 98cdc22..4f852c1 100644
--- a/src/components/ModForm.tsx
+++ b/src/components/ModForm.tsx
@@ -23,11 +23,13 @@ import {
   ModPageLoaderResult
 } from '../types'
 import { initializeFormState } from '../utils'
-import { CheckboxField, InputError, InputField } from './Inputs'
+import { CheckboxField, InputField, InputFieldWithImageUpload } from './Inputs'
 import { OriginalAuthor } from './OriginalAuthor'
 import { CategoryAutocomplete } from './CategoryAutocomplete'
 import { AlertPopup } from './AlertPopup'
 import { Editor, EditorRef } from './Markdown/Editor'
+import { MEDIA_OPTIONS } from 'controllers'
+import { InputError } from './Inputs/Error'
 
 interface GameOption {
   value: string
@@ -220,10 +222,9 @@ export const ModForm = () => {
         />
       </div>
 
-      <InputField
+      <InputFieldWithImageUpload
         label='Featured Image URL'
-        description='We recommend to upload images to https://nostr.build/'
-        type='text'
+        description={`We recommend to upload images to ${MEDIA_OPTIONS[0].host}`}
         inputMode='url'
         placeholder='Image URL'
         name='featuredImageUrl'
diff --git a/src/pages/write/index.tsx b/src/pages/write/index.tsx
index 2bd4bb0..fd9d12c 100644
--- a/src/pages/write/index.tsx
+++ b/src/pages/write/index.tsx
@@ -7,7 +7,6 @@ import {
 } from 'react-router-dom'
 import {
   CheckboxFieldUncontrolled,
-  InputError,
   InputFieldUncontrolled
 } from '../../components/Inputs'
 import { ProfileSection } from '../../components/ProfileSection'
@@ -19,6 +18,7 @@ import '../../styles/write.css'
 import { LoadingSpinner } from 'components/LoadingSpinner'
 import { AlertPopup } from 'components/AlertPopup'
 import { Editor, EditorRef } from 'components/Markdown/Editor'
+import { InputError } from 'components/Inputs/Error'
 
 export const WritePage = () => {
   const userState = useAppSelector((state) => state.user)