swingmusic-extended/src/components/RightSideBar/Search/Main.vue

<template>
  <div class="right-search">
    <TabsWrapper
      :isOnSearchPage="isOnSearchPage"
      :tabs="tabs"
      @switchTab="switchTab"
      :currentTab="currentTab"
    >
      <Tab :name="currentTab" :isOnSearchPage="isOnSearchPage" />
    </TabsWrapper>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import Tab from "./Tab.vue";
import TabsWrapper from "./TabsWrapper.vue";
import useSearchStore from "@/stores/search";

const search = useSearchStore();
defineProps<{
  isOnSearchPage?: boolean;
}>();

const tabs = ["tracks", "albums", "artists"];

const currentTab = ref("tracks");

function switchTab(tab: string) {
  currentTab.value = tab;
  search.switchTab(tab);
}
</script>

<style lang="scss">
.right-search {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;

  .heading {
    padding: $medium;
    border-radius: $small;
    margin-bottom: $small;
    font-size: 2rem;
    color: $white;
  }

  .input {
    display: flex;
    align-items: center;
    position: relative;
  }
}
</style>