feat : new ui et message discord
This commit is contained in:
@@ -1,87 +1,99 @@
|
||||
<template>
|
||||
<div class="bg-m-secondary w-[250px] h-[259px] rounded-md mx-4 shadow-md/50 shadow-black">
|
||||
<p class="font-bold text-3xl text-m-tertiary my-1 mx-3">
|
||||
Backup
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
|
||||
@click="select('bitwarden')"
|
||||
>
|
||||
<p class="font-bold uppercase text-xl ml-[24px]">
|
||||
bitwarden
|
||||
</p>
|
||||
<IconifyIcon
|
||||
icon="mdi:eye"
|
||||
class="text-black text-2xl mr-[24px]"
|
||||
/>
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<button
|
||||
<div class="backup-list">
|
||||
<button
|
||||
v-for="item in folders"
|
||||
:key="item.name"
|
||||
type="button"
|
||||
class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
|
||||
@click="select('inventory')"
|
||||
>
|
||||
<p class="font-bold uppercase text-xl ml-[24px]">
|
||||
inventory
|
||||
</p>
|
||||
<IconifyIcon
|
||||
icon="mdi:eye"
|
||||
class="text-black text-2xl mr-[24px]"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
|
||||
@click="select('sirh')"
|
||||
>
|
||||
<p class="font-bold uppercase text-xl ml-[24px]">
|
||||
sirh
|
||||
</p>
|
||||
<IconifyIcon
|
||||
icon="mdi:eye"
|
||||
class="text-black text-2xl mr-[24px]"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
|
||||
@click="select('ferme')"
|
||||
>
|
||||
<p class="font-bold uppercase text-xl ml-[24px]">
|
||||
ferme
|
||||
</p>
|
||||
<IconifyIcon
|
||||
icon="mdi:eye"
|
||||
class="text-black text-2xl mr-[24px]"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="bg-m-tertiary w-[200px] h-[32px] rounded-md shadow-md/50 shadow-m-black mx-3 mb-[10px] flex items-center justify-between cursor-pointer"
|
||||
@click="select('user')"
|
||||
>
|
||||
<p class="font-bold uppercase text-xl ml-[24px]">
|
||||
user
|
||||
</p>
|
||||
<IconifyIcon
|
||||
icon="mdi:eye"
|
||||
class="text-black text-2xl mr-[24px]"
|
||||
/>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user