84 lines
2.1 KiB
Vue
84 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import {User} from 'lucide-vue-next'
|
|
import Navigation from './Navigation.vue'
|
|
import BalanceWidget from './BalanceWidget.vue'
|
|
import TodayWidget from './TodayWidget.vue'
|
|
import RecentActivityWidget from './RecentActivityWidget.vue'
|
|
import SwipeCards from "@/components/SwipeCards.vue";
|
|
import HeaderWidget from "@/components/HeaderWidget.vue";
|
|
import {useI18n} from "@/i18n";
|
|
import {computed, onBeforeUnmount, onMounted, ref} from "vue";
|
|
|
|
const {t} = useI18n();
|
|
const currentHour = ref(new Date().getHours());
|
|
let timerId: number | undefined;
|
|
|
|
const userName = "Alex Belyan";
|
|
|
|
const greeting = computed(() => {
|
|
if (currentHour.value < 5) {
|
|
return t('header.greeting.night');
|
|
}
|
|
|
|
if (currentHour.value < 12) {
|
|
return t('header.greeting.morning');
|
|
}
|
|
|
|
if (currentHour.value < 18) {
|
|
return t('header.greeting.afternoon');
|
|
}
|
|
|
|
return t('header.greeting.evening');
|
|
});
|
|
|
|
function updateCurrentHour() {
|
|
currentHour.value = new Date().getHours();
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateCurrentHour();
|
|
timerId = window.setInterval(updateCurrentHour, 60_000);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (timerId !== undefined) {
|
|
window.clearInterval(timerId);
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
navigate: [screen: string]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-[#0A0A0F] dark">
|
|
<div class="mx-auto max-w-md min-h-screen flex flex-col relative">
|
|
<!-- Header -->
|
|
<HeaderWidget
|
|
:icon="User"
|
|
:eyebrow=greeting
|
|
:title=userName
|
|
@navigate="emit('navigate', $event)"
|
|
/>
|
|
<!-- Main Content -->
|
|
<main class="flex-1 px-5 pb-32 overflow-y-auto">
|
|
<div class="space-y-4">
|
|
<!-- Balance Widget -->
|
|
<BalanceWidget/>
|
|
|
|
<!-- Today Widget -->
|
|
<TodayWidget/>
|
|
|
|
<!-- Swipe cards Widget -->
|
|
<SwipeCards/>
|
|
|
|
<!-- Recent Activity Widget -->
|
|
<RecentActivityWidget/>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<Navigation active-screen="home" @navigate="emit('navigate', $event)"/>
|
|
</div>
|
|
</div>
|
|
</template> |