Added Notifications

resources/js/Pages/Profile/Achievements/fun_challenges.airport_alphabet.vue

@@ -7,7 +7,8 @@ import AlphabetTable from '@/Components/FlightsGoneBy/AlphabetTable.vue'
 import { computed, ref } from 'vue'
 import { useAlphabetFlights, type CodeType } from '@/Composables/useAlphabetFlights'
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
-
+import CopyButton from "@/Components/FlightsGoneBy/CopyButton.vue";
+defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
     achievement: Achievement
@@ -45,27 +46,6 @@ const selectedYear = ref<number | null>(
 const alphabetTable = ref<InstanceType<typeof AlphabetTable> | null>(null)
 const copied = ref(false)
 
-async function copyBBCode() {
-    const text = alphabetTable.value?.toBBCode()
-    if (text == null) return
-
-    try {
-        await navigator.clipboard.writeText(text)
-    } catch {
-        // Fallback for non-HTTPS or browsers that block clipboard API
-        const el = document.createElement('textarea')
-        el.value = text
-        el.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0'
-        document.body.appendChild(el)
-        el.focus()
-        el.select()
-        document.execCommand('copy')
-        document.body.removeChild(el)
-    }
-
-    copied.value = true
-    setTimeout(() => (copied.value = false), 2000)
-}
 </script>
 
 <template>
@@ -124,13 +104,10 @@ async function copyBBCode() {
                     class="year-select"
                 />
 
-                <v-btn
-                    :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
-                    :color="copied ? 'success' : undefined"
-                    density="compact"
-                    variant="text"
+                <CopyButton
                     title="Copy as BBCode"
-                    @click="copyBBCode"
+                    size="large"
+                    :text="alphabetTable?.bbCode ?? ''"
                 />
             </div>
         </div>