jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Creator bug fix

Browse Source
This commit is contained in:
Karl Carriere
2024-12-17 16:45:49 -05:00
parent 7adc701594
commit 49e599bf6a
3 changed files with 257 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/stores/creatorProfileStore.js
View File

@@ -49,21 +49,9 @@ export const useCreatorProfileStore = defineStore('creator-profile', () => {
} }
} }
async function fetchSpecificCreatorProfile(creatorAlias) {
try {
const creatorResponse = await client.get(
`/api/creators/@${creatorAlias}`
);
value.value = creatorResponse.data;
} catch (error) {
value.value = undefined;
}
}
return { return {
creator: value, creator: value,
hasCreator, hasCreator,
fetchCurrentCreatorProfile, fetchCurrentCreatorProfile,
fetchSpecificCreatorProfile,
}; };
}); });

21
src/views/creators/BannerActions.vue
View File

@@ -1,13 +1,12 @@
<script setup> <script setup>
import { useBrandingStore } from '@/stores/brandingStore.js'; import { useBrandingStore } from '@/stores/brandingStore.js';
import { useCreatorProfileStore } from '@/stores/creatorProfileStore';
import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue'; import DonationButtonBanner from '@/views/creators/DonationButtonBanner.vue';
import { onBeforeUnmount, onMounted, ref } from 'vue'; import { onBeforeUnmount, onMounted, ref } from 'vue';
const creatorProfileStore = useCreatorProfileStore();
const brandingStore = useBrandingStore(); const brandingStore = useBrandingStore();
const isMobile = ref(false); const isMobile = ref(false);
const creator = ref(null);
const baseURL = window.location.origin;
function updateIsMobile() { function updateIsMobile() {
isMobile.value = window.innerWidth <= 640; isMobile.value = window.innerWidth <= 640;
@@ -89,7 +88,12 @@ onMounted(async () => {
} }
const creatorName = window.location.pathname.split('/@').pop(); const creatorName = window.location.pathname.split('/@').pop();
await creatorProfileStore.fetchSpecificCreatorProfile(creatorName); try {
const creatorResponse = await client.get(`/api/creators/@${creatorName}`);
creator.value = creatorResponse.data;
} catch (error) {
creator.value = undefined;
}
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -197,10 +201,11 @@ onBeforeUnmount(() => {
:style="{ backgroundColor: brandingStore.colors.secondary }" :style="{ backgroundColor: brandingStore.colors.secondary }"
> >
<donation-button-banner <donation-button-banner
:creator-id="creatorProfileStore.creator.id" v-if="creator"
:creator-name="creatorProfileStore.creator.name" :creator-id="creator.id"
:on-success-url="successUrl" :creator-name="creator.name"
:on-cancelled-url="cancelledUrl" :on-success-url="baseURL + '/paymentcompleted'"
:on-cancelled-url="baseURL"
></donation-button-banner> ></donation-button-banner>
</div> </div>
</div> </div>

405
src/views/profile/creators/CreatorPage.vue
View File

@@ -1,22 +1,29 @@
<script setup> <script setup>
import XIcon from '@/assets/icons/x.svg' import XIcon from '@/assets/icons/x.svg';
import {computed, ref} from 'vue' import { useClient } from '@/plugins/api.js';
import Socials from './Socials.vue' import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
import BannerPicker from './BannerPicker.vue' import { useUserProfileStore } from '@/stores/userProfileStore.js';
import ColorsPicker from './ColorsPicker.vue' import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
import LogoPicker from "./LogoPicker.vue" import { computed, ref } from 'vue';
import CreateCreator from "./CreateCreator.vue"; import BannerPicker from './BannerPicker.vue';
import {useClient} from "@/plugins/api.js"; import ColorsPicker from './ColorsPicker.vue';
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js"; import CreateCreator from './CreateCreator.vue';
import {useUserProfileStore} from "@/stores/userProfileStore.js"; import LogoPicker from './LogoPicker.vue';
import ChangeTitle from "@/views/profile/creators/ChangeTitle.vue"; import Socials from './Socials.vue';
const creatorProfileStore = useCreatorProfileStore() const creatorProfileStore = useCreatorProfileStore();
const imageBanner = computed(() => creatorProfileStore.creator.images.banner || '/images/placeholders/banner.png') const imageBanner = computed(
const imageLogo = computed(() => creatorProfileStore.creator.images.logo || '/images/placeholders/logo.png') () =>
creatorProfileStore.creator.images.banner ||
'/images/placeholders/banner.png'
);
const imageLogo = computed(
() =>
creatorProfileStore.creator.images.logo || '/images/placeholders/logo.png'
);
const dialog = ref(false); const dialog = ref(false);
const currentComponent = ref('') const currentComponent = ref('');
const componentsMap = { const componentsMap = {
BannerPicker, BannerPicker,
@@ -24,54 +31,53 @@ const componentsMap = {
Socials, Socials,
ColorsPicker, ColorsPicker,
CreateCreator, CreateCreator,
ChangeTitle ChangeTitle,
}; };
async function requestAccept(creatorName) { async function requestAccept(creatorName) {
const userProfileStore = useUserProfileStore() const userProfileStore = useUserProfileStore();
const client = useClient() const client = useClient();
const response = await client.post( const response = await client.post('/api/creators', {
'/api/creators', creatorId: userProfileStore.user.id,
{ name: creatorName,
'creatorId': userProfileStore.user.id, });
'name': creatorName
})
if (response.status >= 200 && response.status < 300) { if (response.status >= 200 && response.status < 300) {
currentComponent.value = null currentComponent.value = null;
dialog.value = false dialog.value = false;
await creatorProfileStore.fetchCurrentCreatorProfile() await creatorProfileStore.fetchCurrentCreatorProfile();
} else { } else {
console.log(`An issue while creating the creator: ${response.statusText}`) console.log(`An issue while creating the creator: ${response.statusText}`);
} }
} }
function requestCancel() { function requestCancel() {
currentComponent.value = null currentComponent.value = null;
dialog.value = false dialog.value = false;
} }
const openDialog = (component) => { const openDialog = (component) => {
currentComponent.value = componentsMap[component] currentComponent.value = componentsMap[component];
dialog.value = true dialog.value = true;
} };
const closeDialog = () => { const closeDialog = () => {
currentComponent.value = null currentComponent.value = null;
dialog.value = false dialog.value = false;
} };
</script> </script>
<template> <template>
<v-dialog v-model="dialog" max-width="800px"> <v-dialog v-model="dialog" max-width="800px">
<v-card :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }"> <v-card
:style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }"
>
<v-card-text> <v-card-text>
<component :is="currentComponent" <component
:creator="creatorProfileStore.creator" :is="currentComponent"
@closeRequested="closeDialog" :creator="creatorProfileStore.creator"
@requestAccept="requestAccept" @closeRequested="closeDialog"
@requestCancel="requestCancel" @requestAccept="requestAccept"
@requestCancel="requestCancel"
></component> ></component>
</v-card-text> </v-card-text>
</v-card> </v-card>
@@ -85,221 +91,289 @@ const closeDialog = () => {
</h1> </h1>
<div v-if="creatorProfileStore.hasCreator" class="w-full max-w-[800px]"> <div v-if="creatorProfileStore.hasCreator" class="w-full max-w-[800px]">
<div class="my-10 border rounded-2xl"> <div class="my-10 border rounded-2xl">
<div class="py-5 uppercase ml-4">
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.informations') }}</div> {{ $t('creatorinfopage.informations') }}
</div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<button <button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"> >
<span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.name') }}</span> <span class="flex-none pa-2 min-w-32 text-left">{{
<span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.creator.name }}</span> $t('creatorinfopage.name')
}}</span>
<span class="flex-auto text-left pr-6 capitalize">{{
creatorProfileStore.creator.name
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
</div> </div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<button <button
@click="openDialog('ChangeTitle')" @click="openDialog('ChangeTitle')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.title') }}</span> >
<span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.creator.title }}</span> <span class="flex-none pa-2 min-w-32 text-left">{{
$t('creatorinfopage.title')
}}</span>
<span class="flex-auto text-left pr-6 capitalize">{{
creatorProfileStore.creator.title
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
</div> </div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<button <button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
<span class="flex-none pa-2 min-w-32 text-left">Stripe Account</span> >
<span class="flex-auto text-left pr-6 capitalize">asdasd038338</span> <span class="flex-none pa-2 min-w-32 text-left"
>Stripe Account</span
>
<span class="flex-auto text-left pr-6 capitalize"
>asdasd038338</span
>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
</div> </div>
</div> </div>
<div class="border rounded-2xl"> <div class="border rounded-2xl">
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.banner&profile') }}</div> <div class="py-5 uppercase ml-4">
{{ $t('creatorinfopage.banner&profile') }}
</div>
<div class="flex flex-col w-full gap-4"> <div class="flex flex-col w-full gap-4">
<button <button
@click="openDialog('ColorsPicker')" @click="openDialog('ColorsPicker')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
>
<span class="flex-auto text-left pr-6 capitalize"> Choisissez votre palette de couleurs. </span> <span class="flex-auto text-left pr-6 capitalize">
Choisissez votre palette de couleurs.
</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button> <button>
<img <img
@click="openDialog('BannerPicker')" @click="openDialog('BannerPicker')"
:src="imageBanner" :src="imageBanner"
class="w-full transition duration-200 ease-in-out transform hover:brightness-125" class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
alt="Tutorial Banner" alt="Tutorial Banner"
> />
</button> </button>
<button class="flex justify-center my-5"> <button class="flex justify-center my-5">
<img <img
@click="openDialog('LogoPicker')" @click="openDialog('LogoPicker')"
class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full" class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
:src="imageLogo" :src="imageLogo"
alt="Profile Image" alt="Profile Image"
> />
</button> </button>
</div> </div>
</div> </div>
<div class="mt-10 border rounded-2xl"> <div class="mt-10 border rounded-2xl">
<div class="py-5 uppercase ml-4">
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.socialnetwork') }}</div> {{ $t('creatorinfopage.socialnetwork') }}
</div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span> >
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.facebookUrl }}</span> <span class="pa-2 min-w-32 text-left"
><v-icon>mdi-facebook</v-icon></span
>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.facebookUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span> >
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.instagramUrl }}</span> <span class="flex-none pa-2 min-w-32 text-left">
<v-icon>mdi-instagram</v-icon></span
>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.instagramUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="flex-none pa-2 w-9 h-9 text-left ml-0.5"> >
<XIcon></XIcon> <span class="flex-none pa-2 w-9 h-9 text-left ml-0.5">
</span> <XIcon></XIcon>
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.xUrl }}</span> </span>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.xUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full "> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span> >
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.linkedInUrl }}</span> <span class="pa-2 min-w-32 text-left"
><v-icon>mdi-linkedin</v-icon></span
>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.linkedInUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full "> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="flex-none pa-2 min-w-32 text-left"> >
<XIcon class="w-5 h-5"></XIcon> <span class="flex-none pa-2 min-w-32 text-left">
</span> <XIcon class="w-5 h-5"></XIcon>
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.tikTokUrl }}</span> </span>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.tikTokUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full "> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span> >
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.youtubeUrl }}</span> <span class="pa-2 min-w-32 text-left"
><v-icon>mdi-youtube</v-icon></span
>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.youtubeUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full "> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span> >
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.redditUrl }}</span> <span class="pa-2 min-w-32 text-left"
><v-icon>mdi-reddit</v-icon></span
>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.redditUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('Socials')" @click="openDialog('Socials')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl "> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span> >
<span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.websiteUrl }}</span> <span class="pa-2 min-w-32 text-left"
><v-icon>mdi-web</v-icon></span
>
<span class="flex-auto text-left pr-6">{{
creatorProfileStore.creator.socials.websiteUrl
}}</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div v-else class="w-full max-w-[800px]"> <div v-else class="w-full max-w-[800px]">
<div class="my-10 border rounded-2xl"> <div class="my-10 border rounded-2xl">
<div class="py-5 uppercase ml-4 px-4">
<div class="py-5 uppercase ml-4 px-4">Informations pour pour votre page</div> Informations pour pour votre page
</div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<button <button
@click="openDialog('CreateCreator')" @click="openDialog('CreateCreator')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out"
<span class="flex-none pa-2 min-w-32 text-left">Nom (Unique) </span> >
<span class="flex-auto text-left pr-6">Vous devez vous assurer de choisir un nom unique ou d'utiliser votre propre nom. Cela est important car c'est votre nom de marque, celui que vous allez présenter aux gens. Par exemple, notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour notre page officielle sur la plateforme.</span> <span class="flex-none pa-2 min-w-32 text-left">Nom (Unique) </span>
<span class="flex-auto text-left pr-6"
>Vous devez vous assurer de choisir un nom unique ou d'utiliser
votre propre nom. Cela est important car c'est votre nom de
marque, celui que vous allez présenter aux gens. Par exemple,
notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour
notre page officielle sur la plateforme.</span
>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('CreateCreator')" @click="openDialog('CreateCreator')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out"> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out"
>
<span class="flex-none pa-2 min-w-32 text-left">Titre</span> <span class="flex-none pa-2 min-w-32 text-left">Titre</span>
<span class="flex-auto text-left pr-6">Le titre doit refléter ce que vous souhaitez mettre en avant sur la plateforme, ce que vous voulez présenter comme contenu ou la raison de votre présence sur la plateforme. Par exemple, des artistes pourraient écrire chanteur, danseur, peintre ou autre. Une entreprise pourrait indiquer son activité. Dans notre cas, pour Hutopy, c'est 'Créer un monde meilleur'. </span> <span class="flex-auto text-left pr-6"
>Le titre doit refléter ce que vous souhaitez mettre en avant sur
la plateforme, ce que vous voulez présenter comme contenu ou la
raison de votre présence sur la plateforme. Par exemple, des
artistes pourraient écrire chanteur, danseur, peintre ou autre.
Une entreprise pourrait indiquer son activité. Dans notre cas,
pour Hutopy, c'est 'Créer un monde meilleur'.
</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
<button <button
@click="openDialog('CreateCreator')" @click="openDialog('CreateCreator')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl "> class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
>
<span class="pa-2 min-w-32 text-left">Description</span> <span class="pa-2 min-w-32 text-left">Description</span>
<span class="flex-auto text-left pr-6">Pour la description, c'est un espace où vous pouvez écrire ce que vous souhaitez : décrire votre page, le service que vous offrez, la raison de votre présence sur la plateforme, votre historique... Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici afin de créer une plateforme sur laquelle les gens pourront s'exprimer et créer, tout en étant respectés et non exploités. </span> <span class="flex-auto text-left pr-6"
>Pour la description, c'est un espace où vous pouvez écrire ce que
vous souhaitez : décrire votre page, le service que vous offrez,
la raison de votre présence sur la plateforme, votre historique...
Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici
afin de créer une plateforme sur laquelle les gens pourront
s'exprimer et créer, tout en étant respectés et non exploités.
</span>
<span class="flex-none"> <span class="flex-none">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-right</v-icon>
</span> </span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style> <style>
.HoverBtn:hover { .HoverBtn:hover {
@apply bg-[#A6147D] text-white; @apply bg-[#A6147D] text-white;
@apply hover:opacity-90; @apply hover:opacity-90;
@@ -309,7 +383,4 @@ const closeDialog = () => {
.custom-border { .custom-border {
border: 3px solid; border: 3px solid;
} }
</style> </style>