Version 1.0.0 - Frontend

src/components/UI/PlaylistItem.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="playlist-item">
+        <Icon :class="{'p-icon': true, 'selected': selected}" :icon="type === 'youtube' ? 'fa-brands fa-youtube' : 'fas fa-music'" />
+        <p>{{ title }}</p>
+    </div>
+</template>
+<script setup>
+
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
+        default: 'My Playlist'
+    },
+    type: {
+        type: String,
+        required: true
+    },
+    selected: {
+        type: Boolean,
+        default: false
+    }
+});
+</script>
+<style scoped>
+.playlist-item {
+    display: flex;
+    align-items: center;
+    transition: 0.2s;
+    gap: 10px;
+    cursor: pointer;
+}
+
+.playlist-item:hover .p-icon {
+    background-color: var(--text);
+    color: var(--text-inverse);
+  
+}
+
+.playlist-item p {
+    margin: 0;
+    font-size: 18px;
+}
+
+.p-icon {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    padding: 15px;
+    border: 2px solid var(--text);
+    border-radius: 10px;
+    font-size: 25px;
+     transition: 0.2s;
+}
+
+.p-icon.selected {
+    background-color: var(--text);
+    color: var(--text-inverse);
+}
+
+.p-icon {
+    width: 25px;
+    height: 25px;
+}
+
+</style>