S. EsmaeiliandClaude Opus 4.6
e31ef5a21f
Full 1:1 migration preserving all visuals, animations and behavior: - Nuxt 4 + Vue 3 (script setup, TypeScript strict) with SSG output - Tailwind CSS v4 with @tailwindcss/vite - Ant Design Vue 4 (dark theme, RTL, Persian locale) for design system - Pinia for state management (ui + contact stores) - motion-v (framer-motion port) for all animations - lucide-vue-next for icons - SEO improvements: og:image, canonical fix, real 404 page, JSON-LD services - JS bundle reduced from 302KB to 239KB gzip - Docker/nginx deployment preserved (out/ -> nginx) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
/* Starts with "--:--" on the server so the first client render matches,
|
|
then sets the real Tehran time only after mount (avoids a hydration mismatch on the clock text) */
|
|
export function useTehranClock() {
|
|
const now = ref<Date | null>(null);
|
|
let t: ReturnType<typeof setInterval> | undefined;
|
|
|
|
onMounted(() => {
|
|
now.value = new Date();
|
|
t = setInterval(() => (now.value = new Date()), 15000);
|
|
});
|
|
onBeforeUnmount(() => clearInterval(t));
|
|
|
|
const time = computed(() =>
|
|
now.value
|
|
? new Intl.DateTimeFormat("fa-IR", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
timeZone: "Asia/Tehran",
|
|
}).format(now.value)
|
|
: "--:--",
|
|
);
|
|
|
|
const shift = computed(() => {
|
|
if (!now.value) return "";
|
|
const hour = Number(
|
|
new Intl.DateTimeFormat("en-US", {
|
|
hour: "numeric",
|
|
hour12: false,
|
|
timeZone: "Asia/Tehran",
|
|
}).format(now.value),
|
|
);
|
|
return hour >= 6 && hour < 14 ? "صبح" : hour >= 14 && hour < 22 ? "عصر" : "شب";
|
|
});
|
|
|
|
return { time, shift };
|
|
}
|