71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
|
|
import SiteLogo from 'soapbox/components/site-logo';
|
|
import { Text, Button, Icon, Modal } from 'soapbox/components/ui';
|
|
import { useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
|
|
|
|
const messages = defineMessages({
|
|
download: { id: 'landing_page_modal.download', defaultMessage: 'Download' },
|
|
helpCenter: { id: 'landing_page_modal.helpCenter', defaultMessage: 'Help Center' },
|
|
login: { id: 'header.login.label', defaultMessage: 'Log in' },
|
|
register: { id: 'header.register.label', defaultMessage: 'Register' },
|
|
});
|
|
|
|
interface ILandingPageModal {
|
|
onClose: (type: string) => void,
|
|
}
|
|
|
|
/** Login and links to display from the hamburger menu of the homepage. */
|
|
const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
|
|
const intl = useIntl();
|
|
|
|
const soapboxConfig = useSoapboxConfig();
|
|
const { isOpen } = useRegistrationStatus();
|
|
const { links } = soapboxConfig;
|
|
|
|
return (
|
|
<Modal
|
|
title={<SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />}
|
|
onClose={() => onClose('LANDING_PAGE')}
|
|
>
|
|
<div className='mt-4 divide-y divide-solid divide-gray-200 dark:divide-gray-800'>
|
|
{links.get('help') && (
|
|
<nav className='mb-6 grid gap-y-8'>
|
|
<a
|
|
href={links.get('help')}
|
|
target='_blank'
|
|
className='flex items-center space-x-3 rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50'
|
|
>
|
|
<Icon src={require('@tabler/icons/lifebuoy.svg')} className='h-6 w-6 shrink-0 text-gray-600 dark:text-gray-700' />
|
|
|
|
<Text weight='medium'>
|
|
{intl.formatMessage(messages.helpCenter)}
|
|
</Text>
|
|
</a>
|
|
</nav>
|
|
)}
|
|
|
|
<div
|
|
className={clsx('grid gap-4 pt-6', {
|
|
'grid-cols-2': isOpen,
|
|
'grid-cols-1': !isOpen,
|
|
})}
|
|
>
|
|
<Button to='/login' theme='tertiary' block>
|
|
{intl.formatMessage(messages.login)}
|
|
</Button>
|
|
|
|
{isOpen && (
|
|
<Button to='/signup' theme='primary' block>
|
|
{intl.formatMessage(messages.register)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default LandingPageModal;
|