frontend/app/components/preferences/category.vue

<template>
    <section class="space-y-2">
        <CardTitle class="text-xs">
            {{ name }}
        </CardTitle>
        <Card class="p-0 gap-0">
            <div v-for="preference of preferences" :key="preference">
                <TextPreferenceVue v-if="(prefs[preference] instanceof TextPreference)" :pref="(prefs[preference] as TextPreference)" :name="preference" />
                <BooleanPreferenceVue v-else-if="(prefs[preference] instanceof BooleanPreference)" :pref="(prefs[preference] as BooleanPreference)" :name="preference" />
                <SelectPreferenceVue v-else-if="(prefs[preference] instanceof SelectPreference)" :pref="(prefs[preference] as SelectPreference<string>)" :name="preference" />
                <NumberPreferenceVue v-else-if="(prefs[preference] instanceof NumberPreference)" :pref="(prefs[preference] as NumberPreference)" :name="preference" />
                <MultiSelectPreferenceVue v-else-if="(prefs[preference] instanceof MultiSelectPreference)" :pref="(prefs[preference] as MultiSelectPreference<string>)" :name="preference" />
                <CodePreferenceVue v-else-if="(prefs[preference] instanceof CodePreference)" :pref="(prefs[preference] as CodePreference)" :name="preference" />
                <UrlPreferenceVue v-else-if="(prefs[preference] instanceof UrlPreference)" :pref="(prefs[preference] as UrlPreference)" :name="preference" />
            </div>
        </Card>
    </section>
</template>

<script lang="ts" setup>
import { Card, CardTitle } from "../ui/card/index.ts";
import { preferences as prefs } from "./preferences.ts";
import BooleanPreferenceVue from "./types/boolean.vue";
import CodePreferenceVue from "./types/code.vue";
import MultiSelectPreferenceVue from "./types/multiselect.vue";
import NumberPreferenceVue from "./types/number.vue";
import SelectPreferenceVue from "./types/select.vue";
import TextPreferenceVue from "./types/text.vue";
import UrlPreferenceVue from "./types/url.vue";
import {
    BooleanPreference,
    CodePreference,
    MultiSelectPreference,
    NumberPreference,
    SelectPreference,
    TextPreference,
    UrlPreference,
} from "./types.ts";

const { preferences = [], name } = defineProps<{
    preferences: (keyof typeof prefs)[];
    name: string;
}>();
</script>