Lay foundations for fully implementing the info cards

src/components/MainView.vue

@@ -5,16 +5,34 @@
 			:preview="preview_mode"
 			:api_url="api_base"
 			:token="get_token()"
+			:data_exists="data.length !== 0"
 			@playlist_export="handle_export"
 			@data_request="get_data"
 		/>
 		<div v-if="error" class="error">{{ error }}</div>
+		<div v-else id="data_view">
+			<span
+				v-for="item in data"
+				:key="item.uri"
+			>
+				<Track
+					v-if="item.type === 'track'"
+					:item="item"/>
+				<Artist
+					v-else-if="item.type === 'artist'"
+					:item="item"/>
+				<Unknown v-else :item="item"/>
+			</span>
+		</div>
 	</div>
 </template>
 
 <script>
 import * as axios from "axios";
 import ControlCard from "./ControlBar.vue";
+import ArtistCard from "./cards/Artist.vue";
+import TrackCard from "./cards/Track.vue";
+import UnknownTypeCard from "./cards/UnknownType.vue";
 
 export default {
 	name: `MainView`,
@@ -23,7 +41,10 @@ export default {
 		dev_mode: Boolean,
 	},
 	components: {
-		Control: ControlCard
+		Control: ControlCard,
+		Track: TrackCard,
+		Artist: ArtistCard,
+		Unknown: UnknownTypeCard,
 	},
 	data() { return {
 		data: [],
@@ -40,8 +61,6 @@ export default {
 			console.log("Handling the export");
 		},
 		get_data(config) {
-			console.log("Fetching data from Spotify")
-			console.log(config)
 			let url = `${this.api_base}/me/top/${config.type.toLowerCase()}`;
 
 			let limit = parseInt(config.count) || 10;
@@ -62,6 +81,34 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+#data_view {
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin: 0 auto;
+	display: flex;
+	width: 90%;
+}
 
+.card {
+	background-color: var(--card-colour);
+	border-radius: var(--border-radius);
+	color: var(--card-text);
+	padding: 20px 10px 10px;
+	flex-direction: column;
+	border-style: none;
+	position: relative;
+	margin: 5px auto;
+	display: flex;
+	width: 90%;
+}
+
+
+@media only screen and (min-width: 768px) {
+	.card {
+		width: 230px;
+		margin: 5px;
+	}
+}
 </style>

src/components/cards/Artist.vue

@@ -1,11 +1,22 @@
 <template>
-	<div class="card"></div>
+	<div class="card">
+		<div class="image"></div>
+		<div class="track-info"></div>
+		<div class="popularity bottom left corner"></div>
+		<div class="followers bottom right corner"></div>
+	</div>
 </template>
 
 <script>
 export default {
 	name: `ArtistCard`,
 	components: {},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		}
+	},
 	data() { return {};},
 	computed: {},
 	methods: {}

src/components/cards/Track.vue

@@ -1,11 +1,22 @@
 <template>
-	<div class="card"></div>
+	<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>
 </template>
 
 <script>
 export default {
 	name: `TrackCard`,
 	components: {},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		}
+	},
 	data() { return {};},
 	computed: {},
 	methods: {}

src/components/cards/UnknownType.vue

@@ -1,11 +1,19 @@
 <template>
-	<div class="card"></div>
+	<div class="card">
+		Unknown Type: {{ item.type }}
+	</div>
 </template>
 
 <script>
 export default {
 	name: `UnknownTypeCard`,
 	components: {},
+	props: {
+		item: {
+			type: Object,
+			required: true,
+		}
+	},
 	data() { return {};},
 	computed: {},
 	methods: {}