import { useEffect, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { useTranslation, Trans } from 'react-i18next';
import {
Button,
Center,
Footer,
AvailabilityViewer,
Logo,
} from 'components';
import {
StyledMain,
AboutSection,
P,
VideoWrapper,
VideoLink,
} from '../Home/homeStyle';
import {
Step,
FakeCalendar,
FakeTimeRange,
ButtonArea,
} from './helpStyle';
import video_thumb from 'res/video_thumb.jpg';
const Help = () => {
const { push } = useHistory();
const { t } = useTranslation(['common', 'help']);
const [videoPlay, setVideoPlay] = useState(false);
useEffect(() => {
document.title = t('help:name');
}, [t]);
return (
<>
{t('help:name')}
{videoPlay ? (
) : (
{
e.preventDefault();
setVideoPlay(true);
}}
>
{t('common:video.button')}
)}
{t('help:p1')}
{t('help:p2')}
{t('help:s1')}
Use the form at crab.fit to make a new event. You only need to put in the rough time period for when your event occurs here, not your availability.
{t('help:p4')}
SunMonTueWedThuFriSat
11121314151617
{t('help:p5')}
{t('help:s2')}
{t('help:p6')}
{t('help:p7')}
{t('help:s3')}
{t('help:p8')}
{t('help:p9')}
{t('help:p10')}
);
};
export default Help;