Populate track component

src/components/cards/Track.vue

@@ -1,9 +1,34 @@
 <template>
 	<div class="card">
-		<div class="image"></div>
-		<div class="track-info"></div>
-		<div class="popularity bottom left corner"></div>
-		<div class="duration bottom right corner"></div>
+		<div class="image">
+			<img
+				v-if="item.album.images.length !== 0"
+				:src="item.album.images[0].url"
+				:alt="`${item.album.name} cover art`"
+			>
+			<icon
+				v-else
+				type="notes"
+				:size="200"
+				:border="100"
+				:primary="css_var('--missing-picture-foreground')"
+				:background="css_var('--missing-picture-background')"
+			/>
+		</div>
+		<div class="track-info">
+			<div class="title">{{ item.name }}</div>
+			<div class="subtitle">
+				{{ item.artists.map(x => x.name).join(`, `) }}
+			</div>
+		</div>
+		<div
+			class="popularity corner"
+			v-tooltip.auto="popularity_tooltip"
+		>{{ item.popularity }}</div>
+		<div
+			class="duration corner"
+			v-tooltip.auto="duration_tooltip"
+		>{{ duration }}</div>
 	</div>
 </template>
 
@@ -17,12 +42,92 @@ export default {
 			required: true,
 		}
 	},
-	data() { return {};},
-	computed: {},
+	data() { return {
+		duration_tooltip: `Song Duration`,
+		popularity_tooltip: `Song Popularity`,
+	}},
+	computed: {
+		duration() {
+			let timestamp = ``;
+
+			// Converting to seconds
+			let duration = Math.trunc(this.item.duration_ms / 1000);
+			let seconds = duration % 60;
+
+			// Converting to minutes
+			duration = Math.trunc(duration / 60);
+			let minutes = duration % 60
+
+			// Converting to hours
+			duration = Math.trunc(duration / 60);
+			let hours = duration % 24;
+
+			if (seconds < 10) {
+				seconds = `0${seconds}`
+			};
+
+			return `${hours > 0 ? `${hours}:` : ''}${minutes}:${seconds}`;
+		}
+	},
 	methods: {}
 }
 </script>
 
-<style>
+<style scoped>
+.card {
+	border-radius: var(--corner-rounding);
+	background-color: var(--card-colour);
+	padding: 20px 10px 1.75em;
+	color: var(--card-text);
+	flex-direction: column;
+	align-items: center;
+	border-style: none;
+	position: relative;
+	margin: 5px auto;
+	display: flex;
+	width: 90%;
+}
 
+
+img {
+	--size: 200px;
+	width: var(--size);
+	height: var(--size);
+}
+
+.title {
+	text-align: center;
+	font-size: larger;
+}
+
+.subtitle {
+	text-align: center;
+	font-size: smaller;
+}
+
+.corner {
+	background-color: var(--on-card-colour);
+	color: var(--on-card-text);
+	position: absolute;
+	padding: 1px 6px;
+}
+
+.popularity {
+	border-radius: 0 var(--corner-rounding) 0 var(--corner-rounding);
+	bottom: 0;
+	left: 0;
+}
+
+.duration {
+	border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;
+	bottom: 0;
+	right: 0;
+}
+
+@media only screen and (min-width: 768px) {
+	.card {
+		width: 230px;
+		margin: 5px;
+	}
+}
 </style>