diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx index 32bdb94f9783..c3ead83b61b3 100644 --- a/components/MDX/MDX.tsx +++ b/components/MDX/MDX.tsx @@ -1,7 +1,7 @@ import { MDXProvider as CoreMDXProvider } from '@mdx-js/react'; import mermaid from 'mermaid'; import Link from 'next/link'; -import React, { useLayoutEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { TwitterDMButton, TwitterFollowButton, @@ -97,7 +97,7 @@ function MermaidDiagram({ graph }: MermaidDiagramProps) { /** * @description Renders the Mermaid diagram. */ - useLayoutEffect(() => { + useEffect(() => { if (!graph) { return; } diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx index 9b4a983bc69b..3d9e0863dd69 100644 --- a/components/NewsletterSubscribe.tsx +++ b/components/NewsletterSubscribe.tsx @@ -1,4 +1,3 @@ -import { useTranslation } from 'next-i18next'; import React, { useState } from 'react'; import IconCircularLoader from '@/components/icons/CircularLoader'; @@ -6,6 +5,7 @@ import { ButtonType } from '@/types/components/buttons/ButtonPropsType'; import { InputTypes } from '@/types/components/InputBoxPropsType'; import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; +import { useTranslation } from '../utils/i18n'; import Button from './buttons/Button'; import InputBox from './InputBox'; import Loader from './Loader'; @@ -26,6 +26,7 @@ interface NewsletterSubscribeProps { title?: string; subtitle?: string; type?: string; + errorSubtitle?: string; } /** @@ -37,19 +38,21 @@ interface NewsletterSubscribeProps { * @param {string} props.title - The title of the Subscribe card. * @param {string} props.subtitle - The subtitle of the Subscribe card. * @param {string} props.type - The type of subscription. + * @param {string} props.errorSubtitle - The error subtitle to be displayed. */ export default function NewsletterSubscribe({ className = 'p-8 text-center text-black', dark = false, title = 'Subscribe to our newsletter to receive news about AsyncAPI.', subtitle = 'We respect your inbox. No spam, promise ✌️', - type = 'Newsletter' + type = 'Newsletter', + errorSubtitle = 'Subscription failed, please let us know about it by submitting a bug' }: NewsletterSubscribeProps) { const [email, setEmail] = useState(''); const [name, setName] = useState(''); const [status, setStatus] = useState(FormStatus.NORMAL); - const { t } = useTranslation('common'); + const { t, ready } = useTranslation('common', { keyPrefix: 'newsletterCTA' }); const headTextColor = dark ? 'text-white' : ''; const paragraphTextColor = dark ? 'text-gray-300' : ''; @@ -94,10 +97,10 @@ export default function NewsletterSubscribe({ return (
- {t('newsletterCTA.successTitle')} + {ready ? t('successTitle') : 'Thank you for subscribing!'} - {t('newsletterCTA.subtitle')} + {ready ? t('subtitle') : subtitle}
); @@ -107,12 +110,12 @@ export default function NewsletterSubscribe({ return (
- {t('newsletterCTA.errorTitle')} + {ready ? t('errorTitle') : 'Something went wrong'} - {t('newsletterCTA.errorSubtitle')}{' '} + {ready ? t('errorSubtitle') : errorSubtitle}{' '} - {t('newsletterCTA.errorLinkText')} + {ready ? t('errorLinkText') : 'here'}
@@ -122,10 +125,10 @@ export default function NewsletterSubscribe({ return (
- {title} + {ready ? t('title') : title} - {subtitle} + {ready ? t('subtitle') : subtitle} {status === 'loading' ? ( } dark={dark} /> @@ -134,20 +137,20 @@ export default function NewsletterSubscribe({