98 lines
4.0 KiB
TypeScript
98 lines
4.0 KiB
TypeScript
import clsx from 'clsx';
|
||
import { Card, CardLink } from '@/components/card';
|
||
import Star from '@/assets/images/thick-round-star-6.svg';
|
||
import useLocale, { LocalesMap } from '@/utils/useLocale';
|
||
import { caveat } from '@/styles/fonts';
|
||
import styles from './addCityCard.module.scss';
|
||
|
||
const locales: LocalesMap = {
|
||
ru: {
|
||
title: 'Помогите добавить свой город',
|
||
description:
|
||
'Знаете, где найти расписание транспорта в вашем городе? Поделитесь источником — это поможет расширить RideBus.',
|
||
city: 'Название города',
|
||
cityDescription: 'Расскажите, для какого города нужно расписание.',
|
||
source: 'Источник расписания',
|
||
sourceDescription:
|
||
'Пришлите ссылку на сайт перевозчика или актуальное расписание.',
|
||
details: 'Полезные подробности',
|
||
detailsDescription:
|
||
'Если знаете, добавьте номера маршрутов и названия остановок.',
|
||
handwritten: 'Начнём с вашего города',
|
||
contact: 'Напишите в Telegram',
|
||
contactDescription: 'Пришлите название города и источник расписания',
|
||
email: 'Или напишите на почту',
|
||
emailSubject: 'Новый город для RideBus',
|
||
emailBody:
|
||
'Город: \nИсточник расписания: \nМаршруты и остановки (если известны): \n',
|
||
},
|
||
en: {
|
||
title: 'Help add your city',
|
||
description:
|
||
'Know where to find your city’s transport timetable? Share a source to help bring RideBus to more cities.',
|
||
city: 'Your city',
|
||
cityDescription: 'Tell us which city needs a timetable.',
|
||
source: 'A timetable source',
|
||
sourceDescription:
|
||
'Send a link to the transport operator’s website or a current timetable.',
|
||
details: 'Helpful details',
|
||
detailsDescription:
|
||
'Include route numbers and stop names if you know them.',
|
||
handwritten: 'Let’s start with your city',
|
||
contact: 'Get in touch on Telegram',
|
||
contactDescription: 'Send your city’s name and a timetable source',
|
||
email: 'Or send an email',
|
||
emailSubject: 'A new city for RideBus',
|
||
emailBody: 'City: \nTimetable source: \nRoutes and stops (if known): \n',
|
||
},
|
||
};
|
||
|
||
export function AddCityCard() {
|
||
const t = useLocale(locales);
|
||
const email = `mailto:xtimms@live.com?subject=${encodeURIComponent(t('emailSubject'))}&body=${encodeURIComponent(t('emailBody'))}`;
|
||
return (
|
||
<section aria-label={t('title')}>
|
||
<Card
|
||
className={styles.card}
|
||
title={t('title')}
|
||
subtitle={t('description')}
|
||
classes={{ content: styles.content }}
|
||
>
|
||
<Star className={styles.star} aria-hidden="true" />
|
||
<ol className={styles.steps}>
|
||
{['city', 'source', 'details'].map((step, index) => (
|
||
<li key={step}>
|
||
<span className={styles.number} aria-hidden="true">
|
||
{index + 1}
|
||
</span>
|
||
<div>
|
||
<h4>{t(step)}</h4>
|
||
<p>{t(`${step}Description`)}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
<div className={styles.contact}>
|
||
{/* <span className={clsx(styles.handwritten, caveat.className)}>
|
||
{t('handwritten')}
|
||
</span> */}
|
||
<div className={styles.links}>
|
||
<CardLink
|
||
title={t('contact')}
|
||
hrefTitle={t('contactDescription')}
|
||
href="https://t.me/xtimms"
|
||
className={styles.link}
|
||
/>
|
||
<CardLink
|
||
title={t('email')}
|
||
hrefTitle="xtimms@live.com"
|
||
href={email}
|
||
className={styles.link}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</section>
|
||
);
|
||
}
|