85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
<template>
|
|
<div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
|
|
:style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
|
|
Récompenses
|
|
</div>
|
|
|
|
<div v-for="(item, index) in rewards"
|
|
class="my-1 text-white"
|
|
:key="index"
|
|
:style="{ backgroundColor: userStore.creator.colors.primary }">
|
|
|
|
<div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]">
|
|
{{ item.title }}
|
|
</div>
|
|
|
|
<div class="p-3">
|
|
<p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">
|
|
{{ item.description }}
|
|
</p>
|
|
|
|
<div v-if="item.amount" class="flex flex-row justify-end space-x-2">
|
|
<div class="text-right text-white">{{ item.amount }}$</div>
|
|
<div>|</div>
|
|
<div v-if="item.quantity"> Quantité: {{ item.quantity }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, computed} from 'vue';
|
|
import {useUserStore} from "@/stores/userStore.js";
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const rewards = ref([
|
|
{
|
|
title: 'Hoodie',
|
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
|
amount: 50,
|
|
quantity: 5,
|
|
date: '2024-09-19',
|
|
},
|
|
{
|
|
title: 'Small Talk',
|
|
description: 'Ceci est la description du contenu.',
|
|
amount: null,
|
|
quantity: null,
|
|
date: '2024-09-18',
|
|
},
|
|
{
|
|
title: 'Les vrais choses',
|
|
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.',
|
|
amount: 100,
|
|
quantity: 10,
|
|
date: '2024-09-17',
|
|
},
|
|
{
|
|
title: 'On va changer le monde',
|
|
description: 'Deuxième contenu avec description.',
|
|
amount: 150,
|
|
quantity: 1,
|
|
date: '2024-09-16',
|
|
},
|
|
{
|
|
title: 'Séance photo',
|
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
|
amount: 150,
|
|
quantity: 20,
|
|
date: '2024-09-19',
|
|
},
|
|
{
|
|
title: 'Séance photo',
|
|
description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
|
|
amount: 150,
|
|
quantity: 20,
|
|
date: '2024-09-19',
|
|
},
|
|
]);
|
|
|
|
</script>
|
|
|