add bottom bar

src/components/BottomBar/BottomBar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="b-bar border card-dark">
+    <div class="grid">
+      <SongCard />
+      <div class="controlsx">
+        <div class="controls controls-bottom">
+          <div class="nav">
+            <div class="image" id="previous" @click="playPrev"></div>
+            <div
+              class="image play-pause"
+              @click="playPause"
+              :class="{ isPlaying: isPlaying }"
+            ></div>
+            <div class="image" id="next" @click="playNext"></div>
+          </div>
+        </div>
+        <div class="progress progress-bottom">
+          <span class="durationx">0:45</span>
+          <input
+            id="progress"
+            type="range"
+            :value="pos"
+            min="0"
+            max="1000"
+            @change="seek()"
+          />
+          <span class="durationx">3:55</span>
+        </div>
+      </div>
+      <div class="prog"></div>
+      <div class="volume-group"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import "../../assets/css/BottomBar/BottomBar.scss";
+import playAudio from "../../composables/playAudio";
+import SongCard from "./SongCard.vue";
+
+const pos = ref(playAudio.pos);
+const isPlaying = ref(playAudio.playing);
+
+const seek = () => {
+  playAudio.seek(document.getElementById("progress").value);
+};
+
+const { playNext } = playAudio;
+const { playPrev } = playAudio;
+const { playPause } = playAudio;
+</script>

src/components/BottomBar/SongCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="info">
+    <div
+      class="image art"
+      :style="{
+        backgroundImage: `url(&quot;${track.image}&quot;)`,
+      }"
+    ></div>
+    <div class="desc">
+      <div>
+        <div class="title ellip">{{ track.title }}</div>
+        <div class="separator no-border"></div>
+        <div class="artists ellip" v-if="track.artists[0] != ''">
+          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
+        <div class="artists" v-else>
+          <span>{{ track.album_artist }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import perks from "../../composables/perks";
+
+const track = ref(perks.current);
+
+const putCommas = perks.putCommas;
+</script>