feat(front): add FilePreviewView and FileShareHandle components for improved file preview and sharing options

front/components/Field/FileUploadField.vue

@@ -1,21 +1,13 @@
 <script setup lang="ts">
 import FileUpload from '~/components/FileUpload.vue'
 import { cx } from 'class-variance-authority'
-import { filesize } from 'filesize'
+
 
 const props = defineProps<{
     name: string
     rules?: string
 }>()
 const { value, setValue } = useField<File>(props?.name, props?.rules)
-watch(value, (v) => {
-    console.log('value', v)
-})
-
-const fileInfo = computed(() => {
-    const [, name, ext] = value?.value?.name?.match(/^(.+)\.(.+)$/) || []
-    return { name, ext }
-})
 
 </script>
 
@@ -27,14 +19,7 @@ const fileInfo = computed(() => {
             isOverDropZone && '!bg-green-100/50 '
         )">
             <template v-if="!!value">
-                <FileIcon :file="value" />
-                <div class="flex flex-col gap-0.5 items-center">
-                    <div class="flex max-w-30 w-full">
-                        <div class="truncate">{{ fileInfo?.name }}</div>
-                        <div>{{ `.${fileInfo?.ext}` }}</div>
-                    </div>
-                    <div class="text-xs opacity-50">{{ filesize(value?.size) }}</div>
-                </div>
+                <FilePreviewView :value="value" />
             </template>
             <template v-else>
                 <LucideUpload class="size-10" />