created component to add a playlist

style/sidebar.scss

@@ -88,4 +88,70 @@
       background-color: #9e9e9e;
     }
   }
+  .create-playlist-popup-container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    // background-color: #1c1c1c;
+    height: 12rem;
+    width: 20rem;
+    border-radius: 2px;
+    padding: 1rem;
+    padding-top: 0.1rem;
+    border: 1px solid grey;
+    position: fixed;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .close-button {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 50%;
+      font-size: 1.6rem;
+      transition: all 0.3s;
+    }
+    .close-button:hover {
+      transform: scale(1.1);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .close-button:active {
+      transform: scale(0.8);
+    }
+    .header {
+      font-size: 1.2rem;
+      font-weight: 200;
+      margin-bottom: 0.5rem;
+    }
+    .create-playlist-form {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      height: 100%;
+      .name-input {
+        background: transparent;
+        border: none;
+        border-bottom: 1px solid grey;
+        font-size: 1.1rem;
+        color: white;
+        margin-top: 2rem;
+      }
+      .name-input:focus {
+        outline: none;
+      }
+      .create-button {
+        position: absolute;
+        bottom: 0px;
+        width: 5rem;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+      }
+    }
+  }
 }