Add sharing modal

src/components/cards/Track.vue

@@ -54,20 +54,27 @@
 			:track="item"
 			@close="show_track_info = false"
 		/>
+		<Sharing
+			v-if="show_share_modal"
+			:track="item"
+			@close="show_share_modal = false"
+		/>
 	</div>
 </template>
 
 <script>
 // Import Components
 import Icon from "../Icon";
-import PopularityModal from "../modals/PopularityInfo.vue";
+import ShareModal from "../modals/ShareTrack";
-import DetailedTrackModal from "../modals/DetailedTrack.vue";
+import PopularityModal from "../modals/PopularityInfo";
+import DetailedTrackModal from "../modals/DetailedTrack";
 
 export default {
 	name: `TrackCard`,
 	components: {
 		PopularityModal: PopularityModal,
 		TrackInfo: DetailedTrackModal,
+		Sharing: ShareModal,
 		icon: Icon,
 	},
 	props: {
@@ -81,6 +88,7 @@ export default {
 		popularity_tooltip: `Song Popularity`,
 		show_pop_modal: false,
 		show_track_info: false,
+		show_share_modal: false,
 	}},
 	computed: {
 		duration() {

src/components/modals/ShareTrack.vue

@@ -0,0 +1,99 @@
+<template>
+	<transition name="fade" @after-enter="content = true">
+		<div
+			v-if="container"
+			class="modal-container"
+			@click.self.stop="content = false"
+		>
+			<transition name="burst" @after-leave="$emit('close')">
+				<div v-if="content" class="modal">
+					<h2 class="center">Track Sharing</h2>
+					<div class="share-buttons">
+						<button
+							@click="copy_link(track.external_urls.spotify)"
+						>
+							Copy Track Link
+						</button>
+						<button
+							@click="copy_link(track.album.external_urls.spotify)"
+						>
+							Copy Album Link
+						</button>
+						<button
+							v-for="artist in track.artists"
+							:key="artist.uri"
+							@click="copy_link(artist.external_urls.spotify)"
+						>
+							Copy {{ artist.name }}'s Link
+						</button>
+					</div>
+				</div>
+			</transition>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: `ShareTrack`,
+	props: {
+		track: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {return {
+		content: false,
+		container: false,
+	}},
+	computed: {},
+	mounted() {
+		this.$nextTick(function() {
+			this.container = true;
+		});
+	}
+}
+</script>
+
+<style scoped>
+.modal-container {
+	background-color: var(--modal-container-background);
+	justify-content: center;
+	align-items: center;
+	position: fixed;
+	display: flex;
+	height: 100vh;
+	width: 100vw;
+	z-index: 10;
+	left: 0;
+	top: 0;
+}
+
+.modal {
+	background-color: var(--modal-background);
+	border-radius: var(--corner-rounding);
+	padding: 0 15px 15px 15px;
+	text-align: center;
+	max-height: 85%;
+	z-index: 11;
+	width: 90%;
+}
+
+.share-buttons {
+	flex-direction: column;
+	align-items: center;
+	display: flex;
+}
+
+.share-buttons > button {
+	margin-bottom: 10px;
+	width: 64%;
+}
+
+@media only screen and (min-width: 768px) {
+	.modal {
+		width: 50%;
+		max-height: 75%;
+	}
+}
+</style>