88 lines
2.9 KiB
Vue
88 lines
2.9 KiB
Vue
<template>
|
|
<div ref="container">
|
|
<div class="text-center text-2xl py-4 border-t-4">Liens des réseaux sociaux et de votre site</div>
|
|
<div class="px-5 py-2 flex flex-col space-y-4">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Instagram</label>
|
|
</div>
|
|
<v-text-field v-model="props.user.socialNetworks.instagramUrl" label="Instagram"
|
|
variant="outlined"></v-text-field>
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">TikTok</label>
|
|
</div>
|
|
<v-text-field v-model="props.user.socialNetworks.tikTokUrl" label="TikTok" variant="outlined"></v-text-field>
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Facebook</label>
|
|
</div>
|
|
<v-text-field v-model="props.user.socialNetworks.facebookUrl" label="Facebook" variant="outlined"></v-text-field>
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">X</label>
|
|
</div>
|
|
<v-text-field v-model="props.user.socialNetworks.xUrl" label="X" variant="outlined"></v-text-field>
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">LinkedIn</label>
|
|
</div>
|
|
<v-text-field v-model="props.user.socialNetworks.linkedInUrl" label="LinkedIn" variant="outlined"></v-text-field>
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Site Web</label>
|
|
</div>
|
|
<v-text-field v-model="props.user.socialNetworks.yourWebsiteUrl" label="Site Web"
|
|
variant="outlined"></v-text-field>
|
|
|
|
<div class="flex flex-col space-y-4">
|
|
<div class="flex items-center mb-2">
|
|
<label class="text-lg mr-4">Icône pour votre site web *svg</label>
|
|
<v-file-input
|
|
v-model="iconFile"
|
|
accept=".png, .jpeg, .jpg"
|
|
hint="png, jpeg or jpg"
|
|
label="Téléverser une icône"
|
|
@change="onFileChange">
|
|
</v-file-input>
|
|
</div>
|
|
<div v-if="iconUrl" class="flex justify-center">
|
|
<img :src="iconUrl" alt="Icon" class="icon-preview">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue';
|
|
import MyUserModel from "@/models/myUserModel.js";
|
|
|
|
const props = defineProps({
|
|
user: {type: MyUserModel},
|
|
});
|
|
|
|
const emit = defineEmits(["updateWebsiteIcon"]);
|
|
|
|
const iconUrl = ref(props.user.storedDataUrls.websiteIconUrl);
|
|
const iconFile = ref(null);
|
|
|
|
const onFileChange = (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
iconUrl.value = e.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
emit("updateWebsiteIcon", file)
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon-preview {
|
|
max-width: 250px;
|
|
max-height: 250px;
|
|
}
|
|
</style>
|