frontend/src/views/Setting.vue

<template>
<v-app>
    <v-container class="d-flex justify-center align-center">
        <div>
            <h1>Heading</h1>
        <h2>Sub-Heading</h2>
      <v-container class="d-flex justify-center align-center">
        <v-btn class="ma-2" width="150" :to="{name: 'login'}">ลงชื่อเข้าใช้</v-btn>
        <v-btn class="ma-2" width="150">สมัครสมาชิค</v-btn>
      </v-container>
        </div>
    </v-container>
    <v-sheet class="d-flex justify-center ma-2">
        <v-sheet class="mb-auto"
        max-width="420px"
        min-width="200px"
        width="95vw">
            <v-list class = "ma-2" density="compact">
                <v-list-subheader>การแสดงผล</v-list-subheader>

                <v-list-item
                    v-for="(item, i) in display_items"
                    :key="i"
                    :value="item"
                >

                    <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item>
            </v-list>

            <v-list class = "ma-2" density="compact">
                <v-list-subheader>การนำทาง</v-list-subheader>

                <v-list-item
                    v-for="(item, i) in navigation_items"
                    :key="i"
                    :value="item"
                >

                    <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item>
            </v-list>

            <v-list class = "ma-2" density="compact">
                <v-list-item
                    v-for="(item, i) in about_items"
                    :key="i"
                    :value="item"
                    :to="{name: 'about'}"
                >
                <template v-slot:append>
                <v-icon :icon="item.icon"></v-icon>
                </template>
                    <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item>
            </v-list>

            <v-btn class = "ma-2 mt-3" width="100%"
            color="red">
                ลงชื่อออก
            </v-btn>
        </v-sheet>
        
    </v-sheet>   
</v-app> 

</template>

<script setup>

import {RouterLink} from 'vue-router';

const account_items = [
    { text: 'ตั้งค่าบัญชี',
    icon: 'mdi-chevron-right'},
    
  ]

const display_items = [
    { text: 'ภาษา'},
    { text: 'ธีม' },
  ]

  const navigation_items = [
    { text: 'โหมดเริ่มต้น'},
  ]

  const about_items = [
    { text: 'เกี่ยวกับ',
    icon: 'mdi-chevron-right',}
  ]


</script>