Add homepage content switcher for mobile screens

src/components/VContentSwitcher/VContentTypeButton.vue

@@ -0,0 +1,65 @@
+<template>
+  <button
+    type="button"
+    class="transition-colors"
+    :class="[$style.button, selected && $style['button-pressed']]"
+    :aria-pressed="selected"
+    @click="handleClick"
+  >
+    <VIcon :icon-path="iconPath" class="me-1 flex-shrink-0" />
+    <span>{{ $t(`search-type.${contentType}`) }}</span>
+  </button>
+</template>
+
+<script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+import {
+  ALL_MEDIA,
+  AUDIO,
+  IMAGE,
+  supportedContentTypes,
+} from '@/constants/media'
+import VIcon from '@/components/VIcon/VIcon.vue'
+
+import audioIcon from 'assets/icons/audio-wave.svg'
+import imageIcon from 'assets/icons/image.svg'
+import allIcon from 'assets/icons/all-content.svg'
+
+const iconMapping = {
+  [AUDIO]: audioIcon,
+  [IMAGE]: imageIcon,
+  [ALL_MEDIA]: allIcon,
+}
+
+export default defineComponent({
+  name: 'VContentTypeButton',
+  components: { VIcon },
+  props: {
+    /**
+     * One of the media types supported.
+     */
+    contentType: {
+      type: String,
+      required: true,
+      validator: (v) => supportedContentTypes.includes(v),
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const iconPath = computed(() => iconMapping[props.contentType])
+    const handleClick = () => emit('select', props.contentType)
+    return { iconPath, handleClick }
+  },
+})
+</script>
+<style module>
+.button {
+  @apply flex flex-row items-center p-2 pe-3 rounded-sm text-sr font-semibold bg-tx border border-dark-charcoal focus-visible:outline-none  focus-visible:ring focus-visible:ring-pink hover:text-white hover:bg-dark-charcoal focus-visible:hover:border-white focus-visible:border-tx;
+}
+.button-pressed {
+  @apply text-white bg-dark-charcoal focus-visible:border focus-visible:border-white;
+}
+</style>

src/pages/index.vue

@@ -20,6 +20,15 @@
       <h2 class="text-4xl lg:text-6xl mt-auto lg:mt-6">
         {{ $t('hero.subtitle') }}
       </h2>
+      <div class="flex justify-start gap-4 mt-4 md:hidden">
+        <VContentTypeButton
+          v-for="type in supportedContentTypes"
+          :key="type"
+          :content-type="type"
+          :selected="type === contentType"
+          @select="setContentType"
+        />
+      </div>
       <VSearchBar
         v-model.trim="searchTerm"
         class="max-w-[40rem] mt-4 lg:mt-8"
@@ -104,26 +113,29 @@
 </template>
 
 <script>
-import { ref, useRouter, useStore, useContext } from '@nuxtjs/composition-api'
-
-import VContentSwitcherPopover from '~/components/VContentSwitcher/VContentSwitcherPopover.vue'
+import { ref, useContext, useRouter, useStore } from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
 
-import { ALL_MEDIA } from '~/constants/media'
+import { ALL_MEDIA, supportedContentTypes } from '~/constants/media'
 import { MEDIA, SEARCH } from '~/constants/store-modules'
 import { FETCH_MEDIA, UPDATE_QUERY } from '~/constants/action-types'
 
 import imageInfo from '~/assets/homepage_images/image_info.json'
 
 import OpenverseLogo from '~/assets/logo.svg?inline'
+import VContentSwitcherPopover from '~/components/VContentSwitcher/VContentSwitcherPopover.vue'
+import VContentTypeButton from '~/components/VContentSwitcher/VContentTypeButton.vue'
+import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 
 const HomePage = {
   name: 'home-page',
   layout: 'blank',
   components: {
     OpenverseLogo,
     VContentSwitcherPopover,
+    VContentTypeButton,
+    VSearchBar,
   },
   head: {
     meta: [
@@ -194,6 +206,7 @@ const HomePage = {
       contentSwitcher,
       contentType,
       setContentType,
+      supportedContentTypes,
 
       searchTerm,
       handleSearch,