Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/Intro/learn-alert.tsx (TypeScript)

Code before:
import { Alert } from '@freecodecamp/ui';
import { useFeature } from '@growthbook/growthbook-react';
import { useTranslation } from 'react-i18next';
import { Link, Spacer } from '../helpers';
import { ProgressBar } from '../Progress/progress-bar';

interface LearnAlertProps {
  onLearnDonationAlertClick: () => void;
  isDonating: boolean;
}

const LearnAlert = ({
  onLearnDonationAlertClick,
  isDonating
}: LearnAlertProps): JSX.Element | null => {
  const { t } = useTranslation();
  const seasonalAlertFlag = useFeature('seasonal-alert');
  const progressAlertFlag2024 = useFeature('progress-alert-2024');
  const createUniversityFlag = useFeature('university-alert');
  const progressAlertDefault = (text: string, value?: number) => (
    <Alert variant='info' className='annual-donation-alert'>
      {value && (
        <>
          <div className='text-center'>
            <h2>{t('learn.donation-heading')}</h2>
            <h3>{`${value}%`}</h3>
          </div>
          <div aria-hidden='true' className='progress-wrapper'>
            <div>
              <ProgressBar now={value} />
            </div>
          </div>
        </>
      )}
      <p>{text}</p>
      <hr />
      <p className={'text-center'}>
        <Link
          className='btn'
          key='donate'
          sameTab={false}
          to='/donate'
          onClick={onLearnDonationAlertClick}
        >
          {t('buttons.donate')}
        </Link>
      </p>
    </Alert>
  );

  const seasonalAlertFlagAlert = (

Review comment (suggestion):
```suggestion
            <p>{`${value}%`}</p>
```
This isn't acting as a heading.

Code after:
import { Alert } from '@freecodecamp/ui';
import { useFeature } from '@growthbook/growthbook-react';
import { useTranslation } from 'react-i18next';
import { Link, Spacer } from '../helpers';
import { ProgressBar } from '../Progress/progress-bar';

interface LearnAlertProps {
  onLearnDonationAlertClick: () => void;
  isDonating: boolean;
}

const LearnAlert = ({
  onLearnDonationAlertClick,
  isDonating
}: LearnAlertProps): JSX.Element | null => {
  const { t } = useTranslation();
  const seasonalAlertFlag = useFeature('seasonal-alert');
  const progressAlertFlag2024 = useFeature('progress-alert-2024');
  const createUniversityFlag = useFeature('university-alert');
  const progressAlertDefault = (text: string, value?: number) => (
    <Alert variant='info' className='annual-donation-alert'>
      {value && (
        <>
          <div className='text-center'>
            <h2>{t('learn.donation-heading')}</h2>
            <Spacer size='small' />
            <b className='m-0 progress-percent-value'>{`${value}%`}</b>
          </div>
          <div aria-hidden='true' className='progress-wrapper'>
            <div>
              <ProgressBar now={value} />
            </div>
          </div>
        </>
      )}
      <p>{text}</p>
      <Spacer size='medium' />
      <div className={'text-center'}>
        <Link
          className='btn'
          key='donate'
          sameTab={false}
          to='/donate'
          onClick={onLearnDonationAlertClick}
        >
          {t('buttons.donate')}
        </Link>
      </div>
    </Alert>
  );