23 lines
740 B
Vue
23 lines
740 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { AnimatePresence, motion } from "motion-v";
|
||
|
|
import { ArrowUp } from "lucide-vue-next";
|
||
|
|
|
||
|
|
const show = useScrolledPast(700);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<AnimatePresence>
|
||
|
|
<motion.a
|
||
|
|
v-if="show"
|
||
|
|
href="#home"
|
||
|
|
aria-label="بازگشت به بالا"
|
||
|
|
:initial="{ opacity: 0, y: 24 }"
|
||
|
|
:animate="{ opacity: 1, y: 0 }"
|
||
|
|
:exit="{ opacity: 0, y: 24 }"
|
||
|
|
class="fixed bottom-6 left-6 z-[70] flex size-12 items-center justify-center rounded-full border border-line bg-panel/90 text-ink shadow-[0_10px_40px_rgba(0,0,0,0.5)] backdrop-blur transition-colors hover:border-accent hover:text-accent"
|
||
|
|
>
|
||
|
|
<ArrowUp class="size-5" />
|
||
|
|
</motion.a>
|
||
|
|
</AnimatePresence>
|
||
|
|
</template>
|