66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<button
|
|
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 "
|
|
@click="AboutUs = true"
|
|
>
|
|
<v-icon style="font-size: 30px; height: 30px; width: 55px;">
|
|
mdi-information
|
|
</v-icon>
|
|
</button>
|
|
|
|
<v-dialog v-model="AboutUs" max-width="500px">
|
|
<v-form>
|
|
<v-card class="text-center rounded-xl"
|
|
:style="{
|
|
border: `3px solid ${creator.colors.menu}`
|
|
}">
|
|
|
|
<div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
|
|
<div class="flex-1 text-center">
|
|
{{ creator.about.title }}
|
|
</div>
|
|
|
|
<v-btn icon @click="AboutUs = false" class="ml-auto mr-2" variant="text">
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
|
|
<v-card-text class="scrollable-content">
|
|
{{ creator.about.description }}
|
|
</v-card-text>
|
|
|
|
<div class="p-4">
|
|
<v-btn variant="outlined" text class=" w-full" @click="AboutUs = false" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }">Fermer</v-btn>
|
|
</div>
|
|
|
|
</v-card>
|
|
</v-form>
|
|
</v-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue';
|
|
|
|
const AboutUs = ref(false);
|
|
|
|
const props = defineProps({
|
|
creator: {type: Object, required: true},
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scrollable-content {
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.scrollable-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
</style>
|