CrunchyDL/pages/settings.vue

<template>
    <div class="h-screen bg-[#111111] flex flex-col p-5 text-white" 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 justify-center py-2 border-b-2 transition-all"
                :class="activeIndex === index ? 'border-[#ce6104]' : 'border-[#ce620428]'"
            >
                {{ option }}
            </button>
        </div>
    </div>
</template>

<script lang="ts" setup>
const options = ref(['Main', 'Output', 'Naming', 'Crunchyroll', 'About'])
const activeIndex = ref(0)
</script>

<style>
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body {
    animation: fadein 0.5s;
}
</style>