44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<Frame margin="none" class="px-3 py-4 flex items-center gap-2">
|
|
<div>
|
|
<AudioWaveform :size="32" />
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="flex flex-row gap-4">
|
|
<p class="font-medium">
|
|
{{ title }}
|
|
</p>
|
|
<Pen />
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ size }}
|
|
</p>
|
|
<Dot />
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ format }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<EllipsisVertical :size="32" />
|
|
</div>
|
|
</Frame>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Frame from '@/components/ui/frame/Frame.vue'
|
|
import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next'
|
|
|
|
interface Props {
|
|
title: string
|
|
size: string
|
|
format: string
|
|
progress?: number
|
|
error?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
})
|
|
</script>
|