Add AlbumCard and ArtistName components: implement AlbumCard for album display and ArtistName for artist listing with dynamic routing

app/components/Album/Card.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Album } from "@/utils/types"
+
+type AlbumProps = Omit<Album, "artists"> & {
+	artists: Array<Omit<Artist, "file">>
+}
+
+const props = defineProps<AlbumProps>()
+</script>
+
+<template>
+	<article class="card">
+		<NuxtLink :to="`/album/${props._id}`">
+			<NuxtImg :src="props.file" :alt="props.name" />
+			<p>{{ props.name }}</p>
+		</NuxtLink>
+		<ArtistName :artists="props.artists" class="artist" />
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+@use "@/styles/variables" as *;
+
+$width: 240px;
+
+.card {
+	@include fontSize(14px);
+
+	max-width: $width;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: start;
+
+	& > a {
+		& img {
+			border-radius: $border-radius-standard;
+
+			width: $width;
+		}
+
+		& p {
+			margin-top: 0.3rem;
+		}
+	}
+}
+
+.artist {
+	opacity: 0.6;
+}
+</style>

app/components/artist/Name.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { NuxtLink } from "#components"
+
+interface ArtistNameProps {
+	artists: Omit<Artist, "file">[]
+	element?: string | typeof NuxtLink
+}
+
+const props = withDefaults(defineProps<ArtistNameProps>(), {
+	element: NuxtLink,
+})
+
+/**
+ * @param index It stops showing a suffix when the index is 0 (so length - index)
+ */
+const suffix = (index: number) => {
+	if (index > 1) return ", "
+	return ""
+}
+</script>
+
+<template>
+	<div v-if="props.artists" class="artist-name">
+		<div v-for="(artist, index) in props.artists" :key="artist._id">
+			<component
+				:is="props.element"
+				v-bind="
+					props.element == NuxtLink
+						? { to: `/artist/${artist._id}` }
+						: {}
+				"
+			>
+				{{ artist.name }}
+			</component>
+			<span>{{ suffix(props.artists.length - index) }}</span>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.artist-name {
+	display: inline-flex;
+	flex-wrap: wrap;
+
+	& span {
+		white-space: pre;
+	}
+}
+</style>

app/pages/index.vue

@@ -1,3 +1,12 @@
 <template>
-	<h1>Index</h1>
+	<AlbumCard
+		name="I Know You'll Forget Me"
+		file="https://t2.genius.com/unsafe/344x344/https%3A%2F%2Fimages.genius.com%2F837160aed59b6cb52acc489d89e99fa6.1000x998x1.jpg"
+		:artists="[
+			{ name: 'Kado', _id: '1' },
+			{ name: 'Kado', _id: '1' },
+		]"
+		:genre="{ name: 'Folk', _id: '1' }"
+		_id="1"
+	/>
 </template>