Add component and apply to import

app/pages/import.vue

@@ -8,11 +8,14 @@ import EmptyMedia from '@/components/ui/empty/EmptyMedia.vue';
 import EmptyTitle from '@/components/ui/empty/EmptyTitle.vue';
 import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
 
-import { Download, MegaphoneOff, Play } from 'lucide-vue-next';
+import { MegaphoneOff, Play } from 'lucide-vue-next';
 import type { EventSourceListener } from '~/composeables/api/event-source';
 import type { StreamProgress200Item } from '~/composeables/api/models';
 import { streamProgress } from '~/composeables/api/progress-sse-controller/progress-sse-controller';
 import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store';
+import FileUpload from '@/components/ui/file-upload/FileUpload.vue';
+import FileUploadGrid from '@/components/ui/file-upload/FileUploadGrid.vue';
+import Button from '@/components/ui/button/Button.vue';
 
 const currentPlaylistStore = useCurrentPlaylistStore();
 const progressEntries = ref<Map<string, StreamProgress200Item>>(new Map());
@@ -55,6 +58,11 @@ async function listenImports() {
     })
 }
 
+function onYoutubeClick(e: MouseEvent) {
+    console.log("hello")
+    e.stopPropagation();
+}
+
 function stopImports() {
     if (listener) {
         listener.close();
@@ -82,19 +90,23 @@ onUnmounted(() => {
                 </Outline>
             </template>
             <div class="w-full flex flex-col p-8">
-                <Outline class="rounded-xl bg-muted flex flex-col items-center justify-center gap-1">
-                    <Download />
-                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
-                        Drag and drop your audio files
-                    </h4>
-                    <p class="text-sm text-muted-foreground">
-                        or
-                    </p>
-                    <Button variant="destructive">
-                        <Play />
-                        From Youtube
-                    </Button>
-                </Outline>
+                <FileUpload class="rounded-lg border border-dashed border-muted" @onChange="">
+                    <template #default>
+                        <FileUploadGrid />
+                    </template>
+                    <template #content>
+                        <h4 class="z-20 scroll-m-20 text-xl font-semibold tracking-tight">
+                            Drag and drop your audio files
+                        </h4>
+                        <p class="z-20 font-normal text-muted-foreground">
+                            or
+                        </p>
+                        <Button class="z-20" variant="destructive" @click="onYoutubeClick">
+                            <Play />
+                            From Youtube
+                        </Button>
+                    </template>
+                </FileUpload>
                 <div>
                     <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
                         Uploaded files