98 lines
3.1 KiB
Vue
98 lines
3.1 KiB
Vue
<template>
|
|
<Frame margin="none" class="px-3 py-4 flex items-center gap-2">
|
|
<div>
|
|
<Disc3 :size="40" v-if="hasLoaded" />
|
|
<AudioWaveform :size="40" v-if="hasProgress" />
|
|
<FileQuestionMark :size="40" v-if="hasError" />
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<p class="font-medium">
|
|
{{ title }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-row" v-if="hasLoaded">
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ size }}
|
|
</p>
|
|
<Dot />
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ format }}
|
|
</p>
|
|
<Dot />
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ type }}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-row items-center gap-2" v-if="hasProgress">
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ progress }}%
|
|
</p>
|
|
<UiProgress :modelValue="progress" />
|
|
</div>
|
|
<div class="flex flex-row" v-if="hasError">
|
|
<p class="text-sm text-destructive-foreground">
|
|
{{ error }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<UiButton variant="ghost">
|
|
<EllipsisVertical :size="40" />
|
|
</UiButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-56" align="start">
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
Profile
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Settings
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Keyboard shortcuts
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</Frame>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuTrigger
|
|
} from '@/components/ui/dropdown-menu';
|
|
import Frame from '@/components/ui/frame/Frame.vue';
|
|
import { AudioWaveform, Disc3, Dot, EllipsisVertical, FileQuestionMark } from 'lucide-vue-next';
|
|
|
|
interface Props {
|
|
title: string
|
|
size?: string
|
|
format?: string
|
|
type?: string
|
|
progress?: number
|
|
error?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
});
|
|
|
|
const hasLoaded = props.size && props.format && props.type;
|
|
const hasProgress = props.progress;
|
|
const hasError = props.error;
|
|
|
|
</script>
|