change seperator

app/assets/globals.css

@@ -22,4 +22,8 @@ body {
 
 .ltr {
   direction: ltr !important;
+}
+
+.h-50 {
+  height: 3rem;
 }

app/components/Fahras.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useRouter, useNuxtApp } from "nuxt/app"
+import { ref } from "vue"
+type ONET = {
+    Index: number | string,
+    Name: string,
+    Location: string,
+    TotalVerses: number,
+    Verses: string[],
+}
+const nuxtApp = useNuxtApp()
+const Quran: ONET[] = nuxtApp.payload.data['B6H5jvHlMH'].data
+const names = ref(Quran).value.map(v => ({ names: v.Name }))
+const router = useRouter()
+
+function navToLok(lok: number) {
+    const advonced = lok + 1 || 1
+    router.push(`/quran/${advonced}`)
+}
+</script>
+<template>
+    <ol class="column q-mt-xl q-pt-lg">
+        <nuxt-link class="cursor-pointer" v-for="(i, ind) in names" :key="i.names"
+            @click="navToLok(ind)">{{ ind + 1 }}-{{ i.names }}
+        </nuxt-link>
+    </ol>
+</template>

app/layouts/default.vue

@@ -1,20 +1,11 @@
 <script lang="ts" setup>
-type ONET = {
-  Index: number | string,
-  Name: string,
-  Location: string,
-  TotalVerses: number,
-  Verses: string[],
-}
-import { useNuxtApp, useRouter } from 'nuxt/app';
+
+import { useNuxtApp } from 'nuxt/app';
 import { useQuasar } from 'quasar';
 import { ref } from 'vue';
 import { appName } from '../constants/global';
 
-const nuxtApp = useNuxtApp()
-const Quran: ONET[] = nuxtApp.payload.data['B6H5jvHlMH'].data
-const names = ref(Quran).value.map(v => ({ names: v.Name }))
-const router = useRouter()
+
 const $q = useQuasar()
 const offset = ref([0, 18])
 
@@ -25,10 +16,7 @@ function toggleDark() {
   toggle()
   return $q.dark.mode
 }
-function navToLok(lok: number) {
-  const advonced = lok + 1 || 1
-  router.push(`/quran/${advonced}`)
-}
+
 </script>
 
 <template>
@@ -44,11 +32,7 @@ function navToLok(lok: number) {
     </q-header>
 
     <q-drawer persistent min-width="200" v-model="drawerLeft" elevated side="left" bordered>
-      <ol class="column q-mt-xl q-pt-lg">
-        <nuxt-link class="cursor-pointer" v-for="(i, ind) in names" :key="i.names"
-          @click="navToLok(ind)">{{ ind + 1 }}-{{ i.names }}
-        </nuxt-link>
-      </ol>
+      <fahras />
     </q-drawer>
 
     <q-page-container>

app/pages/quran/[...lok].vue

@@ -30,29 +30,29 @@ watchEffect(() => {
 
 const nuxtApp = useNuxtApp()
 const Quran: ONET[] = nuxtApp.payload.data['B6H5jvHlMH'].data
-const sura = computed(() => Quran[lok.value - 1])
+const sura = computed(() => Quran[lok.value - 1] as unknown as number)
 const Verses = computed(() => sura.value.Verses)
-const cleanText = computed(() => JSON.stringify(Verses.value).replaceAll(',', '🎗'))
+const cleanText = computed(() => JSON.stringify(Verses.value).replaceAll(',', ' ♦ '))
 </script>
 <template>
     <QPage padding class=" rtl">
-        <div class="q-mt-xl q-gutter-md">
-            <q-card>
-                <q-card-section class="flex">
+        <div class="q-mt-md q-gutter-md">
+            <q-card class="text-sm">
+                <q-card-section class="flex h-50">
                     <div>
 
-                        <h1 class="text-h3">{{ sura.Name }}</h1>
+                        <h4 class="text-h3">{{ sura.Name }}</h4>
                     </div>
                     <div>
-                        <h4>{{ sura.TotalVerses }}</h4>
-                        <h5>{{ sura.Location }}</h5>
+                        <h4 class="capitalize">{{ sura.TotalVerses }}</h4>
+                        <h4 class="capitalize text-h6">{{ sura.Location }}</h4>
                     </div>
 
                 </q-card-section>
             </q-card>
             <q-card class="q-mt-xs">
                 <q-card-section>
-                    <p class="block just fit verse"> {{ cleanText }}</p>
+                    <p class="capitalize block just fit verse"> {{ cleanText }}</p>
                 </q-card-section>
             </q-card>
         </div>
@@ -65,6 +65,9 @@ const cleanText = computed(() => JSON.stringify(Verses.value).replaceAll(',', '
     font-size: larger;
 }
 
+.capitalize::first-letter {
+    text-transform: uppercase;
+}
 
 .rtl {
     direction: rtl;
@@ -83,6 +86,6 @@ const cleanText = computed(() => JSON.stringify(Verses.value).replaceAll(',', '
 }
 
 .verse::after {
-    content: '🎗';
+    content: '♦';
 }
 </style>

tsconfig.json

@@ -1,7 +1,10 @@
 {
     "compilerOptions": {
         "module": "system",
-        "target": "ES3",
+        "lib": [
+            "ESNext"
+        ],
+        "target": "es2021",
             "noImplicitAny": true,
                 "removeComments": true,
                     "preserveConstEnums": true,