Front Vue: Package Item: Hover animation

front-vue/.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+	"files.exclude": {
+		"**/.git": true,
+		"**/.svn": true,
+		"**/.hg": true,
+		"**/CVS": true,
+		"**/.DS_Store": true,
+		"**/Thumbs.db": true,
+		"**/*.freezed.dart": true,
+		"**/*.g.dart": true,
+		"**/node_modules": true
+	}
+}

front-vue/components/items/package-item.vue

@@ -3,29 +3,47 @@ import type { Package } from "~/models/domain/package";
 
 const props = defineProps<{
     package: Package | undefined;
+    secondaryHref?: string | null;
     formatSecondaryTitle?: (p: Package) => string;
 }>();
 const packageLink = ref(
-    props.package ? `/packages/${props.package?.id}` : null,
+    props.package ? `/packages/${props.package?.id}` : undefined,
 );
+const secondaryHref =
+    props.secondaryHref === null
+        ? undefined
+        : (props.secondaryHref ??
+          (props.package ? `/artists/${props.package?.artist_id}` : undefined));
 </script>
 <template>
     <div>
-        <div class="aspect-[3/4]">
-            <Image
-                :image="package?.poster"
-                :expectedAspectRatio="3 / 4"
-            />
+        <div
+            class="aspect-[3/4] hover:scale-105 transition-transform duration-200"
+        >
+            <NuxtLink :to="packageLink">
+                <Image :image="package?.poster" :expectedAspectRatio="3 / 4" />
+            </NuxtLink>
         </div>
         <div class="flex flex-col pt-2 pl-2 text-sm">
-            <p class="line-clamp-1">{{ package?.name }}</p>
-            <p class="line-clamp-1 font-light">
-                {{
-                    package
-                        ? (formatSecondaryTitle?.(package) ?? package?.artist_name ?? '')
-                        : ''
-                }}
-            </p>
+            <NuxtLink :to="packageLink">
+                <p class="line-clamp-1 hover:underline cursor-pointer">
+                    {{ package?.name }}
+                </p>
+            </NuxtLink>
+            <NuxtLink :to="secondaryHref">
+                <p
+                    class="line-clamp-1 font-light"
+                    :class="{ 'hover:underline': secondaryHref != undefined }"
+                >
+                    {{
+                        package
+                            ? (formatSecondaryTitle?.(package) ??
+                              package?.artist_name ??
+                              "")
+                            : ""
+                    }}
+                </p>
+            </NuxtLink>
         </div>
     </div>
 </template>