Drag and Drop operation on MusicCard

app/components/internal/musiccard/MusicCard.vue

@@ -0,0 +1,55 @@
+<template>
+    <Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted" :class="selected && 'bg-muted'">
+        <div class="text-[2rem] h-full">
+            <Draggable />
+        </div>
+        <Separator orientation="vertical" />
+        <div class="w-fit flex-1 flex flex-col justify-between">
+            <div class="w-full">
+                <div class="flex items-center justify-between w-full">
+                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight truncate max-w-[32ch]">
+                        {{ title }}
+                    </h4>
+                    <p class="leading-7" v-if="date">
+                        {{ date }}
+                    </p>
+                </div>
+                <div>
+                    <p class="text-sm text-muted-foreground">
+                        {{ author }}
+                    </p>
+                </div>
+            </div>
+            <div class="flex gap-1" v-if="badges && badges.length > 0">
+                <Badge v-for="(badge, index) in badges" :key="index">
+                    {{ badge }}
+                </Badge>
+            </div>
+        </div>
+        <Separator orientation="vertical" />
+        <div class="max-w-20 max-h-20 w-20 h-20" v-if="imageUrl">
+            <NuxtImg class="object-cover w-full h-full rounded-md" :src="imageUrl" :alt="title" />
+        </div>
+    </Frame>
+</template>
+
+<script setup lang="ts">
+import { Separator } from '@/components/ui/separator'
+import { Badge } from '@/components/ui/badge'
+import Draggable from '@/components/icon/Draggable.vue'
+import Frame from '@/components/ui/frame/Frame.vue'
+
+interface Props {
+    title: string
+    author: string
+    selected?: boolean
+    badges?: string[]
+    imageUrl?: string
+    date?: string
+}
+
+withDefaults(defineProps<Props>(), {
+    authorLabel: 'Author',
+    badges: () => []
+})
+</script>