🔷 add play and actions btn

src/components/shared/Option.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="drop-btn rounded shadow-sm"
+    id="option-drop"
+    @click="showDropdown"
+  >
+    <div
+      class="image drop-icon"
+      :class="{ clicked: clicked && src == ContextSrc.PHeader }"
+    ></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ContextSrc } from "../../composables/enums";
+
+let elem: DOMRect;
+const clicked = ref(false);
+
+const props = defineProps<{
+  src?: string;
+  color?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "showDropdown", event: any): void;
+}>();
+
+onMounted(() => {
+  elem = document.getElementById("option-drop").getBoundingClientRect();
+});
+
+function showDropdown(e: Event) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+
+  emit("showDropdown", {
+    clientX: elem.left + 45,
+    clientY: elem.top,
+  });
+
+  clicked.value = true;
+}
+</script>
+<style lang="scss">
+.drop-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: $accent;
+  transition: all 0.5s ease-in-out;
+  cursor: pointer;
+
+  .drop-icon {
+    transition: all 0.25s;
+    padding: $small;
+    height: 2.5rem;
+    width: 2.5rem;
+    background-image: url("../../assets/icons/right-arrow.svg");
+    background-size: 1.75rem;
+    transform: rotate(90deg);
+  }
+
+  .clicked {
+    transform: rotate(0deg);
+  }
+
+  &:hover {
+    background-color: $green;
+    .image {
+      transform: rotate(0deg);
+    }
+  }
+}
+</style>

src/components/shared/PlayBtn.vue

@@ -1,23 +1,25 @@
 <template>
-  <div class="play-btn circular">
-    <div class="icon"></div>
-  </div>
+  <div class="play-btn rounded shadow-sm" @click="playThis"></div>
 </template>
-
+<script setup lang="ts">
+function playThis(e: Event) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+}
+</script>
 <style lang="scss">
 .play-btn {
-  width: 2rem;
-  height: 2rem;
-  background-color: $accent;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: $gray3;
   background-image: url("../../assets/icons/play.svg");
-  background-size: 1.25rem;
-  background-position: 60%;
-  background-repeat: no-repeat;
-  transition: all .25s;
+  background-size: 1.75rem;
+  background-position: 50% 50%;
+  transition: all 0.25s ease-in-out;
 
   &:hover {
-      background-color: rgb(58, 197, 58);
-      transform: scale(1.1);
+    background-color: $accent;
+    transform: scale(1.1);
   }
 }
 </style>

src/components/shared/PlayBtnRect.vue

@@ -55,7 +55,7 @@ function play() {
   cursor: pointer;
   background: linear-gradient(34deg, $accent, $red);
   user-select: none;
-  transition: all 0.5s ease;
+  transition: all 0.5s ease-in-out;
 
   .icon {
     height: 2rem;