38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { h, ref, onMounted, onUnmounted, defineComponent } from 'vue';
|
|
import type { DashboardModule } from '../types/module';
|
|
|
|
export const ClockModule: DashboardModule = {
|
|
name: 'clock',
|
|
width: 2,
|
|
height: 1,
|
|
render(params) {
|
|
const label = params.label || 'Local Time';
|
|
|
|
return h(defineComponent({
|
|
setup() {
|
|
const time = ref(new Date().toLocaleTimeString());
|
|
let interval: any;
|
|
|
|
onMounted(() => {
|
|
interval = setInterval(() => {
|
|
time.value = new Date().toLocaleTimeString();
|
|
}, 1000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(interval);
|
|
});
|
|
|
|
return () => h(
|
|
'div',
|
|
{ class: 'w-full h-full flex flex-col items-center justify-center p-5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/10 shadow-lg text-white group cursor-default transition-all' },
|
|
[
|
|
h('span', { class: 'text-sm text-white/50 mb-1 uppercase tracking-widest' }, label),
|
|
h('span', { class: 'text-3xl font-light tracking-tight text-shadow' }, time.value)
|
|
]
|
|
);
|
|
}
|
|
}));
|
|
}
|
|
};
|