You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.9 KiB
44 lines
1.9 KiB
import { useTranslation } from '@/i18n'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Ic } from '@/icons'
|
|
|
|
export function NotificationsTab() {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Card className="border-border-soft bg-card/40 shadow-xs">
|
|
<CardContent className="p-8 sm:p-12 text-center max-w-xl mx-auto space-y-4">
|
|
<div className="size-16 rounded-3xl bg-primary/10 text-primary flex items-center justify-center mx-auto shadow-inner">
|
|
<Ic name="bell" className="size-8" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/25">
|
|
<span className="size-2 rounded-full bg-amber-500 animate-pulse" />
|
|
<span>{t('navigation.soon')}</span>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-black text-foreground">
|
|
{t('settings.notificationsTabTitle')}
|
|
</h3>
|
|
|
|
<p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
|
|
{t('settings.notificationsTabDesc')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-2xl bg-muted/40 border border-border-soft text-start space-y-2 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-2 font-bold text-foreground">
|
|
<Ic name="sparkles" className="size-4 text-primary" />
|
|
<span>{t('settings.notificationsUpcomingFeaturesTitle')}</span>
|
|
</div>
|
|
<ul className="list-disc list-inside space-y-1 ps-1 text-[11px] sm:text-xs">
|
|
<li>{t('settings.notificationsFeature1')}</li>
|
|
<li>{t('settings.notificationsFeature2')}</li>
|
|
<li>{t('settings.notificationsFeature3')}</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|