NSG_PORTAL_V2/components/dynamic-page/page-component/templates/other/copyLinks/ArticleButton.vue

<script setup lang="ts">
const isBookmark = ref(false)
const onClickBookmark = () => {
  isBookmark.value = !isBookmark.value
}
async function copyLink() {
  try {
    const url = window.location.href
    await navigator.clipboard.writeText(url)
    alert('copy link thành công')

  } catch (error) {
    alert(error)
  }

}
</script>
<template>
  <div class="py-5 flex flex-wrap justify-between items-center">
    <div class="flex gap-4 items-center">
      <button title="Quay trở lại" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer">
        <Icon name="fa6-solid:arrow-left" />
      </button>
      <button @click="onClickBookmark()" class="w-8 h-8 rounded-full bg-white hover:bg-primary-100 hover:text-primary-600">
        <Icon v-if="isBookmark === false" name="fa6-regular:bookmark" />
        <Icon v-if="isBookmark === true" name="fa6-solid:bookmark" class="text-primary-600" />
      </button>
    </div>

    <div class="flex gap-4 items-center">
      <button @click="copyLink()" title="Copy link" class="w-12 h-3rem rounded-full flex items-center justify-center bg-white border-1px shadow hover:bg-primary-100 hover:text-primary-600 cursor-pointer text-2xl">
        <Icon name="bi:link-45deg" />
      </button>
    </div>
  </div>
</template>
<style scoped lang="scss">

.center-y {
  display: flex;
}
</style>