mango-v4-ui/components/modals/TermsOfUseModal.tsx

35 lines
1.1 KiB
TypeScript

import { ModalProps } from '../../types/modal'
import Modal from '../shared/Modal'
import { useTranslation } from 'next-i18next'
import Button from '@components/shared/Button'
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
const { t } = useTranslation('common')
return (
<Modal isOpen={isOpen} onClose={onClose} disableOutsideClose hideClose>
<>
<h2 className="mb-2 text-center">{t('accept-terms')}</h2>
<p className="mb-6 flex flex-wrap justify-center">
<span className="mr-1">{t('accept-terms-desc')}</span>
<a
className="flex items-center"
href="https://docs.mango.markets/legal/terms-of-use"
rel="noopener noreferrer"
target="_blank"
>
{t('terms-of-use')}
<ArrowTopRightOnSquareIcon className="ml-1 h-4 w-4 flex-shrink-0" />
</a>
</p>
<Button className="w-full" onClick={onClose} size="large">
{t('agree-and-continue')}
</Button>
</>
</Modal>
)
}
export default TermsOfUseModal