add setting mockup

src/views/Favorite.vue

@@ -19,21 +19,23 @@
 
     </v-card> -->
 
-    <v-card
+    <v-card fluid 
     class="mx-auto"
-    max-width="420"
-    height="600"
+    max-width="500px"
+    width="90vw"
+
+    max-height="600px"
+    height="90vh"
     >
         <v-list
         item-props
-        lines="two"
+        lines="three"
         >
         <v-list-item
             v-for="(item, i) in items"
             :key="i"
             :value="item"
             >
-
             <template v-slot:prepend>
                 <v-img
                 :width="32"
@@ -67,7 +69,5 @@
 </script>
 
 <style >
-.v-list__group__header__prepend-icon {
-    color: red;
-}  
+
 </style>

src/views/Setting.vue

@@ -1,15 +1,120 @@
 <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>
     
-    <h1>Setting</h1>
-    <ul>
-        <li>Accout Setting</li>
-    </ul>
-    <ul>
-        <li style="color: #8f8f8f;">Little Lines เวอร์ชัน DATE-VERSION</li>
-    </ul>
 
 </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>