nguyen van thai
50 lines
1.7 KiB
Vue
50 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { useCategoryStore } from '@/stores/category';
|
|
const store = {
|
|
category: useCategoryStore()
|
|
}
|
|
|
|
const { currentCategoryTree } = storeToRefs(store.category)
|
|
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">
|
|
<nuxt-link :to="{ name: 'categories', params: { categories: `${currentCategoryTree[currentCategoryTree.length - 1]?.code}` } }" 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" />
|
|
</nuxt-link>
|
|
<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>
|