Files
BewlyBewly/src/components/BackToTopAndRefreshButtons.vue
2023-10-17 11:00:46 +08:00

33 lines
978 B
Vue

<script setup lang="ts">
defineProps<{ showRefreshButton: boolean }>()
const emit = defineEmits(['refresh', 'back-to-top'])
</script>
<template>
<div
pos="fixed right-24 bottom-4" z-20
>
<Button
size="small"
backdrop-glass
center
style="
--b-button-width: 45px;
--b-button-height: 45px;
--b-button-border-width: 1px;
--b-button-color: var(--bew-elevated-1);
--b-button-color-hover: var(--bew-elevated-1-hover);
--b-button-shadow: var(--bew-shadow-1);
--b-button-shadow-hover: var(--bew-shadow-2);
--b-button-shadow-active: var(--bew-shadow-1);
"
@click="showRefreshButton ? emit('refresh') : emit('back-to-top')"
>
<Transition name="fade">
<line-md:rotate-270 v-if="showRefreshButton" text-lg shrink-0 rotate-90 absolute />
<line-md:arrow-small-up v-else text-lg shrink-0 absolute />
</Transition>
</Button>
</div>
</template>