Made file upload a separate component

src/components/File/File.tsx

@@ -1,11 +1,20 @@
 import './File.sass'
 import { FileField } from '@kobalte/core/file-field'
 
-export default () => {
+interface Props {
+  maxFiles: number
+  accept: string
+  onFileAccept?: (files: File[]) => void
+  label: string
+  buttonText: string
+  onClick: () => void
+}
+
+export default (props: Props) => {
   return (
     <>
-      <FileField class="filefield" maxFiles={1} onFileAccept={(data) => console.log('data', data)} onFileReject={(data) => console.log('data', data)} onFileChange={(data) => console.log('data', data)}>
+      <FileField class="filefield" maxFiles={props.maxFiles} onFileAccept={props.onFileAccept} accept={props.accept}>
-        <FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
+        <FileField.Dropzone class="filefield__dropzone">{props.label}</FileField.Dropzone>
         <FileField.HiddenInput />
         <FileField.ItemList class="filefield__itemList">
           {() => (
@@ -13,7 +22,9 @@ export default () => {
               <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
               <FileField.ItemName class="filefield__itemName" />
               <FileField.ItemSize class="filefield__itemSize" />
-              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger">Delete</FileField.ItemDeleteTrigger>
+              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={props.onClick}>
+                {props.buttonText}
+              </FileField.ItemDeleteTrigger>
             </FileField.Item>
           )}
         </FileField.ItemList>