ボタヤマTVフロントエンド内コンポーネントの使用例

asset.vue

<template>
  <div class="bg-secondary text-white p-8 flex flex-col gap-4">
    <div class="text-xl">レスポンシヴ</div>
    <div class="flex gap-4 p-4 justify-center items-center mb-10">
      <SvgResponsive>
        <use href="~/assets/logo/botayama-logo.svg#main" class="fill-primary" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/logo/botayama-full.svg#main" class="fill-primary" />
      </SvgResponsive>

      <SvgResponsive>
        <use
          href="~/assets/icon/action-comment.svg#main"
          class="fill-primary"
        />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/action-download.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/action-good.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use
          class="fill-primary"
          href="~/assets/icon/action-play-small.svg#primary"
        />
        <use
          class="fill-white"
          href="~/assets/icon/action-play-small.svg#secondary"
        />
      </SvgResponsive>

      <SvgResponsive>
        <use
          class="fill-primary"
          href="~/assets/icon/action-play.svg#primary"
        />
        <use
          class="fill-white"
          href="~/assets/icon/action-play.svg#secondary"
        />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/action-play2.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/action-share.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/mark-lock.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/sns-facebook.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/sns-instagram.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/sns-twitter.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/ui-close.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/ui-disclosure-arrow.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/ui-pulldown-arrow.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/ui-search.svg#main" />
      </SvgResponsive>

      <SvgResponsive>
        <use href="~/assets/icon/ui-setting.svg#main" />
      </SvgResponsive>
    </div>

    <div class="text-xl">直接参照</div>
    <div class="flex flex-wrap gap-4 p-4 justify-center items-center">
      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/logo/botayama-logo.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/logo/botayama-full.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/action-comment.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/action-download.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/action-good.svg#main" />
      </svg>

      <svg class="w-10 h-10">
        <use
          class="fill-primary"
          href="~/assets/icon/action-play-small.svg#primary"
        />
        <use
          class="fill-white"
          href="~/assets/icon/action-play-small.svg#secondary"
        />
      </svg>

      <svg class="w-10 h-10">
        <use
          class="fill-primary"
          href="~/assets/icon/action-play.svg#primary"
        />
        <use
          class="fill-white"
          href="~/assets/icon/action-play.svg#secondary"
        />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/action-play2.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/action-share.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/mark-lock.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/sns-facebook.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/sns-instagram.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/sns-twitter.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/ui-close.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/ui-disclosure-arrow.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/ui-pulldown-arrow.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/ui-search.svg#main" />
      </svg>

      <svg class="w-10 h-10 fill-primary">
        <use href="~/assets/icon/ui-setting.svg#main" />
      </svg>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import SvgResponsive from '~/components/common/SvgResponsive.vue'

export default defineComponent({
  name: 'DisplayTestAsset',
  components: { SvgResponsive },
})
</script>

ContentsCard-sample.vue

<template>
  <div>
    <div v-if="contents?.length" class="grid grid-cols-4 gap-4 p-4">
      <div v-for="content in contents" :key="content.id">
        <ContentCard :content="content" />
      </div>
    </div>
    <h6 v-else class="text-xl">該当する動画がありませんでした。</h6>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import ContentCard from '~/components/content/ContentCard.vue'
import { useSearchContents } from '~/composables/content/useContent'

export default defineComponent({
  name: 'SearchIndex',
  components: { ContentCard },
  setup() {
    const contents = useSearchContents({})
    return {
      contents,
    }
  },
})
</script>

ContentsSlider-sample.vue

<template>
  <div class="absolute p-4 overflow-x-hidden overflow-y-visible h-96">
    <ImageSlider :contents="contents || []" class="h-20" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import ImageSlider from '~/components/content/ImageSlider.vue'
import { useSearchContents } from '~/composables/content'

export default defineComponent({
  name: 'DisplayTestContentSlider',
  components: {
    ImageSlider,
  },
  setup() {
    const contents = useSearchContents({})

    return {
      contents,
    }
  },
})
</script>

ContentThumbnail-sample.vue

<template>
  <div class="flex flex-col p-8 gap-8">
    <div class="flex flex-col p-6 gap-6">
      <div class="text-xl">一覧</div>
      <div v-if="contents?.length" class="grid grid-cols-4 gap-4">
        <div v-for="content in contents" :key="content.id">
          <ContentHover :content="content" />
        </div>
      </div>
      <h6 v-else class="text-xl">該当する動画がありませんでした。</h6>
    </div>
    <div class="flex flex-col p-6 gap-6">
      <div class="text-xl">スライダー</div>
      <div class="h-20">
        <ContentsSlider
          :contents="contents || []"
          class="relative h-20 overflow-x-clip"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import ContentHover from '~/components/content/ContentHover.vue'
import ContentsSlider from '~/components/content/ContentsSlider.vue'
import { useSearchContents } from '~/composables/content/useContent'

export default defineComponent({
  name: 'SearchIndex',
  components: {
    ContentHover,
    ContentsSlider,
  },
  setup() {
    const contents = useSearchContents({})
    return {
      contents,
    }
  },
})
</script>