Format imports, partial implementation of import upload entries

app/pages/modify.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
-import { Outline } from '@/components/ui/outline';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import Frame from '@/components/ui/frame/Frame.vue';
+import { ref } from 'vue'
+import Dropzone from '~/components/ui/dropzone/Dropzone.vue'
+
+const files = ref<File[]>([])
+
+const handleDrop = (acceptedFiles: File[], event: DragEvent) => {
+    console.log('Files dropped:', acceptedFiles)
+}
+
+const handleError = (error: Error) => {
+    console.error('Dropzone error:', error.message)
+}
 </script>
 
 <template>
@@ -18,9 +27,10 @@ import Frame from '@/components/ui/frame/Frame.vue';
                 </Outline>
             </template>
             <div class="w-full">
-                <Frame>
-                    Hello
-                </Frame>
+                <Dropzone :src="files" :accept="{
+                    'image/*': ['.png', '.jpg', '.jpeg', '.gif']
+                }" :max-size="5 * 1024 * 1024" :min-size="1024" :max-files="3" @drop="handleDrop" @error="handleError"
+                    class="w-full max-w-md" />
             </div>
         </NuxtLayout>
     </div>