site_logiciels/components/Common/Article.vue

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


</template>

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

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

const props = 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>