74 lines
2.7 KiB
Vue
74 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { Calendar, Clock, MapPin } from 'lucide-vue-next';
|
|
import { useI18n } from '../i18n';
|
|
|
|
const { locale, t } = useI18n();
|
|
|
|
const todayEvents = [
|
|
{
|
|
time: '6:30 PM',
|
|
titleKey: 'home.today.event.familyDinner',
|
|
locationKey: 'home.today.location.home',
|
|
colorFrom: '#a855f7',
|
|
colorTo: '#9333ea',
|
|
},
|
|
{
|
|
time: '8:00 PM',
|
|
titleKey: 'home.today.event.movieNight',
|
|
locationKey: 'home.today.location.livingRoom',
|
|
colorFrom: '#3b82f6',
|
|
colorTo: '#2563eb',
|
|
},
|
|
];
|
|
|
|
const formattedToday = computed(() =>
|
|
new Intl.DateTimeFormat(locale.value, {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
}).format(new Date()),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rounded-[18px] border border-white/[0.06] bg-[#16161F] p-5 shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex h-9 w-9 items-center justify-center rounded-[12px] bg-purple-500/10">
|
|
<Calendar class="h-[18px] w-[18px] text-purple-400" :stroke-width="2" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-[15px] font-semibold text-white">{{ t('home.today.title') }}</h3>
|
|
<p class="text-[12px] text-zinc-500">{{ formattedToday }}</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-[12px] font-medium text-zinc-600">{{ todayEvents.length }} {{ t('home.today.events') }}</span>
|
|
</div>
|
|
|
|
<div class="space-y-2.5">
|
|
<div
|
|
v-for="event in todayEvents"
|
|
:key="event.titleKey"
|
|
class="group flex cursor-pointer items-center gap-3 rounded-[14px] border border-white/[0.04] bg-white/[0.02] p-3.5 transition-all hover:border-white/[0.08] hover:bg-white/[0.05]"
|
|
>
|
|
<div class="flex min-w-[52px] flex-col items-center justify-center rounded-[10px] border border-white/[0.06] bg-white/[0.04] py-2 px-2.5">
|
|
<Clock class="mb-1 h-3.5 w-3.5 text-zinc-500" :stroke-width="2" />
|
|
<span class="text-[13px] font-semibold leading-none text-white">{{ event.time }}</span>
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<h4 class="mb-0.5 text-[14px] font-semibold text-white">{{ t(event.titleKey) }}</h4>
|
|
<div class="flex items-center gap-1 text-zinc-500">
|
|
<MapPin class="h-3 w-3" :stroke-width="2" />
|
|
<span class="text-[12px]">{{ t(event.locationKey) }}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="h-12 w-1.5 rounded-full opacity-60 transition-opacity group-hover:opacity-100"
|
|
:style="{ background: `linear-gradient(to bottom, ${event.colorFrom}, ${event.colorTo})` }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|