import React, { useContext } from 'react'; import Typography from '../../ui/typography/typography'; import { COLORS, TYPOGRAPHY, FONT_WEIGHT, } from '../../../helpers/constants/design-system'; import { I18nContext } from '../../../contexts/i18n'; export default function EditGasDisplayEducation() { const t = useContext(I18nContext); return ( <div className="edit-gas-display-education"> <Typography as="p" color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6} > {t('editGasEducationModalIntro')} </Typography> <Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.h6} fontWeight={FONT_WEIGHT.BOLD} > {t('editGasHigh')} </Typography> <Typography as="p" color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6} > {t('editGasEducationHighExplanation')} </Typography> <Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.h6} fontWeight={FONT_WEIGHT.BOLD} > {t('editGasMedium')} </Typography> <Typography as="p" color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6} > {t('editGasEducationMediumExplanation')} </Typography> <Typography color={COLORS.TEXT_DEFAULT} variant={TYPOGRAPHY.h6} fontWeight={FONT_WEIGHT.BOLD} > {t('editGasLow')} </Typography> <Typography as="p" color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6} > {t('editGasEducationLowExplanation')} </Typography> </div> ); }