Added basic module support
This commit is contained in:
35
app/modules/clock.ts
Normal file
35
app/modules/clock.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
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() {
|
||||
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' }, 'Local Time'),
|
||||
h('span', { class: 'text-3xl font-light tracking-tight text-shadow' }, time.value)
|
||||
]
|
||||
);
|
||||
}
|
||||
}));
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user