pancy fants

src/components/NewPostWidget.tsx

@@ -1,5 +1,8 @@
-import { useState, ChangeEvent } from 'react'
+import { useState } from 'react'
 import FancyTextEditor, { TextInputKeyDownEvent } from './FancyTextEditor.tsx'
+import PrimaryButton from './PrimaryButton.tsx'
+import SecondaryButton from './SecondaryButton.tsx'
+import { openFileDialog } from '../utils/openFileDialog.ts'
 
 interface NewPostWidgetProps {
   onSubmit: (content: string, media: File[]) => void
@@ -20,20 +23,19 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
     setContent(value)
   }
 
-  const handleMediaChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const inputEl = e.target as HTMLInputElement
-    if (inputEl.files == null || inputEl.files.length === 0) {
+  async function onAddMediaClicked() {
+    const files = await openFileDialog('image/*', true)
+    if (files == null || files.length === 0) {
       return
     }
 
-    const newFiles = Array.from(inputEl.files).map((file) => ({
+    const newFiles = Array.from(files).map((file) => ({
       id: crypto.randomUUID(),
       file,
       objectUrl: URL.createObjectURL(file),
     }))
 
     setAttachments((attachments) => [...attachments, ...newFiles])
-    inputEl.value = ''
   }
 
   const handleSubmit = () => {
@@ -90,24 +92,13 @@ export default function NewPostWidget({ onSubmit, isSubmitting = false }: NewPos
       )}
 
       <div className="flex justify-between items-center">
-        <label className="cursor-pointer text-gray-500 hover:text-gray-700">
-          <input
-            type="file"
-            accept="image/*"
-            onChange={handleMediaChange}
-            className="hidden"
-            disabled={isSubmitting}
-          />
-          <span className="flex items-center">+ Add media</span>
-        </label>
-
-        <button
-          className="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 disabled:opacity-50"
+        <SecondaryButton onClick={onAddMediaClicked}>+ add media</SecondaryButton>
+        <PrimaryButton
           onClick={handleSubmit}
           disabled={isSubmitting || (content.trim() === '' && attachments.length === 0)}
         >
-          Post
-        </button>
+          post
+        </PrimaryButton>
       </div>
     </div>
   )