75 lines
2.6 KiB
Vue
75 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { Activity, CreditCard, Popcorn, ShoppingCart, Users } from 'lucide-vue-next';
|
|
import { useI18n } from '../i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const activities = [
|
|
{
|
|
icon: ShoppingCart,
|
|
titleKey: 'home.activity.shopping',
|
|
subtitleKey: 'home.activity.shoppingSubtitle',
|
|
time: '2h',
|
|
bgColor: 'bg-emerald-500/10',
|
|
textColor: 'text-emerald-400',
|
|
},
|
|
{
|
|
icon: Popcorn,
|
|
titleKey: 'home.activity.movieVote',
|
|
subtitleKey: 'home.activity.movieVoteSubtitle',
|
|
time: '5h',
|
|
bgColor: 'bg-purple-500/10',
|
|
textColor: 'text-purple-400',
|
|
},
|
|
{
|
|
icon: CreditCard,
|
|
titleKey: 'home.activity.subscription',
|
|
subtitleKey: 'home.activity.subscriptionSubtitle',
|
|
time: '1d',
|
|
bgColor: 'bg-rose-500/10',
|
|
textColor: 'text-rose-400',
|
|
},
|
|
{
|
|
icon: Users,
|
|
titleKey: 'home.activity.newEvent',
|
|
subtitleKey: 'home.activity.newEventSubtitle',
|
|
time: '2d',
|
|
bgColor: 'bg-blue-500/10',
|
|
textColor: 'text-blue-400',
|
|
},
|
|
];
|
|
</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-blue-500/10">
|
|
<Activity class="h-[18px] w-[18px] text-blue-400" :stroke-width="2" />
|
|
</div>
|
|
<h3 class="text-[15px] font-semibold text-white">{{ t('home.activity.title') }}</h3>
|
|
</div>
|
|
<button class="text-[12px] font-medium text-purple-400 transition-colors hover:text-purple-300">
|
|
{{ t('home.activity.viewAll') }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="activity in activities"
|
|
:key="activity.titleKey"
|
|
class="group flex cursor-pointer items-center gap-3 rounded-[12px] p-3 transition-all hover:bg-white/[0.03]"
|
|
>
|
|
<div :class="['flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[12px] transition-transform group-hover:scale-110', activity.bgColor]">
|
|
<component :is="activity.icon" :class="['h-[18px] w-[18px]', activity.textColor]" :stroke-width="2" />
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="mb-0.5 text-[14px] font-medium text-white">{{ t(activity.titleKey) }}</p>
|
|
<p class="truncate text-[12px] text-zinc-500">{{ t(activity.subtitleKey) }}</p>
|
|
</div>
|
|
<span class="flex-shrink-0 text-[12px] font-medium text-zinc-600">{{ activity.time }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|