From f68ff92f12f8ad4bc4f157b78771d16067eaaf97 Mon Sep 17 00:00:00 2001
From: Daniel Andreas Wang <codingforpeace@protonmail.com>
Date: Fri, 13 Mar 2026 17:38:13 +0100
Subject: add clock

---
 package-lock.json      |  7 +++++++
 package.json           |  1 +
 src/views/HomeView.vue | 28 ++++++++++++++++++++++++++--
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6625aa8..a1c923d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "news-app",
       "version": "0.0.0",
       "dependencies": {
+        "dayjs": "^1.11.20",
         "dotenv": "^16.5.0",
         "express": "^4.21.2",
         "pinia": "^3.0.4",
@@ -1964,6 +1965,12 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
diff --git a/package.json b/package.json
index 90d5b56..f651fa5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "dayjs": "^1.11.20",
     "dotenv": "^16.5.0",
     "express": "^4.21.2",
     "pinia": "^3.0.4",
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>
-- 
cgit