sepia-search-motore-di-ricerca-video/client/src/components/SearchWarning.vue

<template>
  <div class="block" v-bind:class="{ highlight: highlight }" v-translate="{ indexName: indexName }">
    <strong>%{indexName}</strong> displays videos and channels that match your search but is not the publisher, nor the owner.
    If you notice any problems with a video, report it to the administrators on the PeerTube website where the video is published.
  </div>
</template>

<style lang="scss">
  @import '../scss/_variables';

  .block {
    font-style: italic;
    color: $orange;

    &.highlight {
      color: #fff;
      background-color: $orange-darken;
      font-style: normal;
      padding: 20px;
    }
  }

</style>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    props: {
      indexName: String,
      highlight: Boolean
    }
  })
</script>