49 lines
2.0 KiB
Vue
49 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { Outline } from '@/components/ui/outline';
|
|
import { SidebarTrigger } from '@/components/ui/sidebar';
|
|
import { Download, Play } from 'lucide-vue-next';
|
|
import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-1">
|
|
<NuxtLayout name="default">
|
|
<template #header>
|
|
<Outline side="bottom" padding="dense" class="w-full">
|
|
<div class="flex gap-8 w-full items-center">
|
|
<SidebarTrigger :size="5" />
|
|
<h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
|
|
Import tracks
|
|
</h2>
|
|
</div>
|
|
</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>
|
|
<UiButton variant="destructive">
|
|
<Play />
|
|
From Youtube
|
|
</UiButton>
|
|
</Outline>
|
|
<div>
|
|
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
|
|
Uploaded files
|
|
</h3>
|
|
<div class="space-y-2">
|
|
<UploadEntry title="Test" size="3.8 MB" format="mp4" />
|
|
<UploadEntry title="Test" :progress="78" />
|
|
<UploadEntry title="Test" error="Uploading failed, please check your internet" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</div>
|
|
</template>
|