nguyen van thai
32 lines
1.2 KiB
Vue
32 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const isBookmark = ref(false)
|
|
const onClickBookmark = () => {
|
|
isBookmark.value = !isBookmark.value
|
|
}
|
|
</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 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>
|