125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<script setup>
|
|
import { useNavigate } from '../../composables/Core/useNavigate'
|
|
|
|
const props = defineProps({
|
|
to: {
|
|
type: [String, Object],
|
|
default: null
|
|
},
|
|
fallback: {
|
|
type: String,
|
|
default: 'Home'
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: 'Back'
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const { navigate } = useNavigate()
|
|
|
|
const goBack = () => {
|
|
if (props.to) {
|
|
if (typeof props.to === 'string') {
|
|
navigate({ page: props.to })
|
|
} else {
|
|
navigate(props.to)
|
|
}
|
|
} else if (window.history.length > 1) {
|
|
window.history.back()
|
|
} else {
|
|
navigate({ page: props.fallback })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button @click="goBack" class="back-button-premium" :class="className" type="button">
|
|
<div class="icon-container">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</div>
|
|
<span v-if="text" class="back-text">{{ text }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.back-button-premium {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--bg-card, rgba(255, 255, 255, 0.8));
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
|
|
padding: 6px 14px;
|
|
border-radius: 50px;
|
|
color: var(--text-primary, #333);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
outline: none;
|
|
}
|
|
|
|
.back-button-premium:hover {
|
|
transform: translateX(-3px);
|
|
background: var(--bg-primary, #fff);
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
|
|
border-color: var(--border-color, rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.back-button-premium:active {
|
|
transform: translateX(-1px) scale(0.97);
|
|
}
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--bg-tertiary, #f8f9fa);
|
|
color: var(--text-primary, #1a1a1a);
|
|
border-radius: 50%;
|
|
font-size: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.back-button-premium:hover .icon-container {
|
|
background: var(--text-primary, #1a1a1a);
|
|
color: var(--bg-primary, #fff);
|
|
}
|
|
|
|
.back-text {
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
/* Dark mode support */
|
|
:global(.dark-mode) .back-button-premium {
|
|
background: rgba(30, 32, 38, 0.8);
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
color: #fff;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
:global(.dark-mode) .icon-container {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
}
|
|
|
|
:global(.dark-mode) .back-button-premium:hover {
|
|
background: rgba(55, 60, 75, 1);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
:global(.dark-mode) .back-button-premium:hover .icon-container {
|
|
background: #fff;
|
|
color: #1a1a1a;
|
|
}
|
|
</style>
|