site_logiciels/components/Common/Article.vue

<template>
  <v-col
    v-if="!pictureRight && mdAndUp"
    cols="12"
    md="6"
    class="image-container d-flex justify-center"
  >
    <v-img max-width="350" :src="article.image" :alt="article.imageAlt" />
  </v-col>

  <v-col cols="12" md="6">
    <h3>{{ article.title }}</h3>
    <p>{{ article.text }}</p>
    <v-btn max-width="510px" :href="article.btnHref" target="_blank">
      {{ article.btnTitle }}
    </v-btn>
  </v-col>

  <v-col
    v-if="pictureRight || (mdAndDown && !md)"
    cols="12"
    md="6"
    class="image-container d-flex justify-center"
  >
    <v-img max-width="350" :src="article.image" :alt="article.imageAlt" />
  </v-col>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { useDisplay } from 'vuetify'
import type { Article } from '~/types/interface'

const { mdAndUp, mdAndDown, md } = useDisplay()

defineProps({
  article: {
    type: Object as PropType<Article>,
    required: true,
  },
  pictureRight: {
    type: Boolean,
    default: true,
  },
})
</script>

<style scoped lang="scss">
.v-btn {
  background: var(--secondary-color);
  color: var(--on-secondary-color);
  margin-top: 20px;
}
</style>