<template>
  <div class="px-2">
    <div class="flex flex-col max-w-2xl mx-auto rounded-3xl shadow-2xl mt-2 mb-16">

      <H1 class="text-center text-4xl bg-fuchsia-900 p-3  rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
        Personnaliser votre profil
      </H1>
      
      <ProfileBanner></ProfileBanner>
      <Aboutyou></Aboutyou>
      <SocialLinks></SocialLinks>

      <div class="sticky inset-x-0 bottom-0 flex justify-center px-4 pb-4">
        <div class="flex space-x-2">
          <v-btn class="save-btn" @click="saveAll">Enregistrer</v-btn>
          <router-link :to="`/${currentUserName}`">
            <v-btn class="save-btn">Retour</v-btn>
          </router-link>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script async setup>
import Aboutyou from "@/views/main/Aboutyou.vue";
import SocialLinks from "@/views/main/SocialLinks.vue";
import ProfileBanner from "@/views/main/ProfileBanner.vue";
import DonationPopup from "@/views/main/DonationPopup.vue";
</script>


<style scoped>
.save-btn {
  z-index: 10;
}
</style>
