add clockHEADmain

1 files changed, 26 insertions, 2 deletions

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a5290ec..c780410 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,15 +1,39 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 import { useNewsStore } from '@/stores/news'
 
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+const tehranTime = ref('')
 const store = useNewsStore()
+let interval: ReturnType<typeof setInterval>
+
+const updateClocks = () => {
+  tehranTime.value = dayjs().tz('Asia/Tehran').format('HH:mm:ss')
+}
 
 onMounted(() => {
-  store.fetchTopHeadlines({ country: 'us' })
+  updateClocks()
+  interval = setInterval(updateClocks, 1000)
+  store.fetchEverything({ q: 'iran' })
+})
+
+onUnmounted(() => {
+  clearInterval(interval)
 })
 </script>
 
 <template>
+  <div class="container">
+    <div class="clock">
+      <div class="time">Tehran time: {{ tehranTime }}</div>
+    </div>
+  </div>
+
   <main>
     <p v-if="store.loading">Loading...</p>
     <p v-else-if="store.error">{{ store.error }}</p>