120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<template>
|
|
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
|
|
:style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
|
|
Actualité
|
|
</div>
|
|
|
|
<div v-for="(item, index) in articles"
|
|
class="my-1 text-white"
|
|
:key="index"
|
|
:style="{ backgroundColor: brandingStore.value.colors.primary }">
|
|
|
|
<div class="flex justify-between items-center border-b-2 border-white p-2 mx-2">
|
|
<p class="text-xl tracking-[8px]">
|
|
<span v-if="item.type === 'nouvelle'">
|
|
Nouvelle
|
|
</span>
|
|
<span v-if="item.type === 'contenu'">
|
|
Contenu
|
|
</span>
|
|
</p>
|
|
<p class="text-xs">{{ item.date }}</p>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<div class="text-lg tracking-[2px]">
|
|
{{ item.title }}
|
|
</div>
|
|
|
|
<p v-if="item.description"
|
|
class="text-gray-300 text-sm text-justify mt-1 py-1">
|
|
{{ item.description }}
|
|
</p>
|
|
|
|
<div v-if="item.rating" class="stars flex justify-end">
|
|
{{ item.rating }} ★
|
|
</div>
|
|
|
|
<img v-if="item.photo"
|
|
:src="item.photo"
|
|
class="w-full h-auto my-2"/>
|
|
|
|
<video v-if="item.video"
|
|
controls
|
|
:src="item.video"
|
|
class="w-full h-auto my-2">
|
|
</video>
|
|
|
|
<div class="flex justify-evenly">
|
|
<v-btn icon variant="plain">
|
|
<v-icon>mdi-thumb-up</v-icon>
|
|
</v-btn>
|
|
<v-btn icon variant="plain">
|
|
<v-icon>mdi-comment-outline</v-icon>
|
|
</v-btn>
|
|
<v-btn icon variant="plain">
|
|
<v-icon>mdi-gift-outline</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue';
|
|
import {useBrandingStore} from "@/stores/brandingStore.js";
|
|
|
|
const brandingStore = useBrandingStore()
|
|
|
|
const articles = ref([
|
|
{
|
|
type: 'nouvelle',
|
|
title: 'La visite du studio',
|
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
|
photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
|
|
video: null,
|
|
rating: null,
|
|
date: '2024-09-19'
|
|
},
|
|
{
|
|
type: 'contenu',
|
|
title: 'Éditer comme un pro!',
|
|
description: 'Ceci est la description du contenu.',
|
|
photo: null,
|
|
video: null,
|
|
rating: 4.5,
|
|
date: '2024-09-18'
|
|
},
|
|
{
|
|
type: 'nouvelle',
|
|
title: 'Le studio',
|
|
description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.',
|
|
photo: null,
|
|
video: null,
|
|
rating: null,
|
|
date: '2024-09-17'
|
|
},
|
|
{
|
|
type: 'contenu',
|
|
title: 'Contenu 2',
|
|
description: 'Deuxième contenu avec description.',
|
|
photo: null,
|
|
video: null,
|
|
rating: 5.0,
|
|
date: '2024-09-16'
|
|
},
|
|
{
|
|
type: 'nouvelle',
|
|
title: 'La 2e visite du studio',
|
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
|
photo: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
|
|
video: null,
|
|
rating: null,
|
|
date: '2024-09-19'
|
|
},
|
|
]);
|
|
|
|
</script>
|