Added Notifications

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

@@ -6,7 +6,9 @@ import PanelSubHeader from '@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue
 import AirlineAlphabetTable from '@/Components/FlightsGoneBy/AirlineAlphabetTable.vue'
 import { computed, ref } from 'vue'
 import { useAlphabetAirlines, type CodeType } from '@/Composables/useAlphabetAirlines'
-
+import {copyToClipboard} from "@/Composables/useClipboard";
+import CopyButton from "@/Components/FlightsGoneBy/CopyButton.vue";
+defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
     achievement: Achievement
@@ -47,28 +49,7 @@ const selectedYear = ref<number | null>(
 
 // Copy BBCode
 const airlineTable = ref<InstanceType<typeof AirlineAlphabetTable> | null>(null)
-const copied = ref(false)
 
-async function copyBBCode() {
-    const text = airlineTable.value?.toBBCode()
-    if (text == null) return
-
-    try {
-        await navigator.clipboard.writeText(text)
-    } catch {
-        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>
@@ -133,13 +114,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="airlineTable?.bbCode ?? ''"
                 />
             </div>
         </div>