100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<template>
|
|
<div class="backup-card card-glow">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Backup</h2>
|
|
<span class="font-mono text-[10px] text-m-muted tracking-widest uppercase">Dossiers</span>
|
|
</div>
|
|
|
|
<div class="backup-list">
|
|
<button
|
|
v-for="item in folders"
|
|
:key="item.name"
|
|
type="button"
|
|
class="backup-btn"
|
|
:class="{ 'backup-btn-active': active === item.name }"
|
|
@click="select(item.name)"
|
|
>
|
|
<div class="flex items-center gap-2.5">
|
|
<IconifyIcon :icon="item.icon" class="text-base text-m-accent" />
|
|
<span class="font-display text-sm font-semibold uppercase tracking-wide">
|
|
{{ item.name }}
|
|
</span>
|
|
</div>
|
|
<IconifyIcon
|
|
icon="mdi:chevron-right"
|
|
class="text-lg text-m-muted transition-transform duration-200"
|
|
:class="{ 'translate-x-0.5 !text-m-accent': active === item.name }"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue"
|
|
import { Icon as IconifyIcon } from "@iconify/vue"
|
|
import backupOptions from "~/server/config/backup-options.json"
|
|
|
|
const emit = defineEmits(["select"])
|
|
const active = ref<string | null>(null)
|
|
const folders = backupOptions as Array<{ name: string; icon: string }>
|
|
|
|
const select = (name: string) => {
|
|
active.value = name
|
|
emit("select", name)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.backup-card {
|
|
background: rgb(var(--m-secondary));
|
|
border-radius: 12px;
|
|
padding: 1.25rem;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: rgb(var(--m-text));
|
|
}
|
|
|
|
.backup-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.backup-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.625rem 0.875rem;
|
|
border-radius: 8px;
|
|
background: rgb(var(--m-tertiary));
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: rgb(var(--m-text));
|
|
}
|
|
|
|
.backup-btn:hover {
|
|
border-color: rgb(var(--m-accent) / 0.15);
|
|
background: rgb(var(--m-accent) / 0.06);
|
|
}
|
|
|
|
.backup-btn-active {
|
|
border-color: rgb(var(--m-accent) / 0.25);
|
|
background: rgb(var(--m-accent) / 0.08);
|
|
box-shadow: 0 0 12px -4px rgb(var(--m-accent) / 0.15);
|
|
}
|
|
</style>
|