42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import Link from 'next/link';
|
|
import { Card } from '@/components/card';
|
|
import { CursorEffect } from '@/components/cursor';
|
|
import Star from '@/assets/images/thick-round-star-5.svg';
|
|
import LinkIcon from '@/assets/icons/link.svg';
|
|
import useLocale from '@/utils/useLocale';
|
|
import { locales } from './locales';
|
|
import styles from './reportCard.module.scss';
|
|
|
|
export function ReportCard() {
|
|
const t = useLocale(locales);
|
|
|
|
return (
|
|
<Card
|
|
className={styles.card}
|
|
role="region"
|
|
aria-label={t('title')}
|
|
title={t('title')}
|
|
subtitle={t('description')}
|
|
classes={{ content: styles.content, subtitle: styles.subtitle }}
|
|
>
|
|
<Star className={styles.star} aria-hidden="true" />
|
|
<div className={styles.badges} aria-hidden="true">
|
|
<span>{t('timetable')}</span>
|
|
<span>{t('routes')}</span>
|
|
<span>{t('stops')}</span>
|
|
</div>
|
|
<CursorEffect
|
|
className={styles.action}
|
|
cursorBorderRadius={16}
|
|
cursorPadding={4}
|
|
effectForce={3}
|
|
>
|
|
<Link href="/contribute">
|
|
{t('action')}
|
|
<LinkIcon aria-hidden="true" />
|
|
</Link>
|
|
</CursorEffect>
|
|
</Card>
|
|
);
|
|
}
|