56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<div class="h-screen bg-[#11111189] flex flex-col p-5 text-white font-dm" style="-webkit-app-region: drag">
|
|
<div class="flex flex-row items-center justify-center">
|
|
<div class="text-2xl">Settings</div>
|
|
</div>
|
|
<div class="flex flex-row mt-2" style="-webkit-app-region: no-drag">
|
|
<button
|
|
v-for="(option, index) in options"
|
|
@click="activeIndex = index"
|
|
class="w-full flex items-center text-sm justify-center py-2 border-b-2 transition-all"
|
|
:class="activeIndex === index ? 'border-[#ce6104]' : 'border-[#ce620428]'"
|
|
>
|
|
{{ option }}
|
|
</button>
|
|
</div>
|
|
<SettingsMain v-if="activeIndex === 0" />
|
|
<SettingsAbout v-if="activeIndex === 1" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const options = ref<Array<string>>(['Main', 'About'])
|
|
const activeIndex = ref(0)
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
body {
|
|
animation: fadein 0.5s;
|
|
}
|
|
|
|
.font-dm {
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
.font-protest {
|
|
font-family: 'Protest Riot', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.font-dm-big {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 1000;
|
|
font-style: normal;
|
|
}
|
|
</style>
|