frontend/src/views/Setting.vue

<template>
    <v-sheet class="d-flex justify-center">

        <v-sheet class="ma-2 pa-4 mb-auto">

            <v-row class="ma-2" justify="space-around">
            <v-avatar
                color="grey"
                size="128"
            >
            <v-img cover src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/1200px-User-avatar.svg.png"></v-img>
            </v-avatar>
            </v-row>

            <v-list-item
            center
                class="text-black"
                title="SRP Rottenmango"
                subtitle="sasha@example.org"
            >
            </v-list-item>
        </v-sheet>
        
    </v-sheet>

    <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-item
                    v-for="(item, i) in account_items"
                    :key="i"
                    :value="item"
                >
                <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-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"
                >
                <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>

    <div style="color: #8f8f8f;">Little Lines เวอร์ชัน DATE-VERSION</div>
    

</template>

<script setup>

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>