From 9afab33b9a7f43bb5c04e01a0fd26f215aaa6e90 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 8 Apr 2022 21:03:38 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=B7=20add=20new=20playlist=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/playlists/NewPlaylistCard.vue | 43 ++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/components/playlists/NewPlaylistCard.vue

diff --git a/src/components/playlists/NewPlaylistCard.vue b/src/components/playlists/NewPlaylistCard.vue
new file mode 100644
index 0000000..502b4cd
--- /dev/null
+++ b/src/components/playlists/NewPlaylistCard.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="p-card rounded" id="new-playlist-card">
+    <div class="gradient rounded"></div>
+    <div class="plus image p-image"></div>
+    <div>New Playlist</div>
+  </div>
+</template>
+
+<style lang="scss">
+#new-playlist-card {
+  display: grid;
+  place-items: center;
+  background-color: $black;
+  position: relative;
+  cursor: pointer;
+
+  .gradient {
+    position: absolute;
+    width: calc(100% - 2rem);
+    height: 10rem;
+    top: 1rem;
+    background-image: linear-gradient(37deg, $red, $blue);
+    background-size: 100%;
+    transition: all .5s ease-in-out;
+  }
+
+  .image {
+    background-image: url("../../assets/icons/plus.svg");
+    background-size: 5rem;
+    z-index: 1;
+    transition: all .5s ease-in-out;
+  }
+
+  &:hover {
+    .gradient {
+      background-size: 30rem;
+    }
+    .image {
+      transform: rotate(270deg);
+    }
+  }
+}
+</style>