Repository: answerdev/answer
File: ui/src/components/Footer/index.tsx (TypeScript)

Code before:

import React from 'react';
import { Link } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import { Trans, useTranslation } from 'react-i18next';

import dayjs from 'dayjs';

import { siteInfoStore } from '@/stores';

const Footer = () => {
  const { t } = useTranslation('translation', { keyPrefix: 'footer' }); // Scoped translations for footer
  const fullYear = dayjs().format('YYYY');
  const siteName = siteInfoStore((state) => state.siteInfo.name);
  const cc = `${fullYear} ${siteName}`;

  return (
    <footer className="bg-light">
      <Container className="py-3">
        <p className="text-center mb-0 p-3 small">
          {/* Link to Privacy Policy with right margin for spacing */}
          <Link to="/privacy" className="me-3">
            {t('privacy')}
          </Link>
          {/* Link to Terms of Service with right margin */}
          <Link to="/tos">{t('terms_of_service')}</Link>
        </p>
        <p className="text-center mb-0 small">
          <Trans i18nKey="build_on" values={{ cc }}>
            Powered by{' '}
            <a
              href="https://answer.apache.org"
              target="_blank"
              rel="noopener noreferrer">
              Apache Answer
            </a>
            - the open-source software that powers Q&A communities.
            <br />
            Made with love © 2022 Answer.
          </Trans>
        </p>
      </Container>
    </footer>
  );
};

export default React.memo(Footer);


Review comment (suggestion):
I'm not sure we can reuse these translations?

```suggestion
          <Link to="/privacy" className="me-3">
            {t('label', { keyPrefix: 'admin.legal.privacy_policy' })}
          </Link>
          {/* Link to Terms of Service with right margin */}
          <Link to="/tos">
            {t('label', { keyPrefix: 'admin.legal.terms_of_service' })}
          </Link>
```

Code after:

import React from 'react';
import { Link } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import { Trans, useTranslation } from 'react-i18next';

import dayjs from 'dayjs';

import { siteInfoStore } from '@/stores';

const Index = () => {
  const { t } = useTranslation('translation', { keyPrefix: 'footer' }); // Scoped translations for footer
  const fullYear = dayjs().format('YYYY');
  const siteName = siteInfoStore((state) => state.siteInfo.name);
  const cc = `${fullYear} ${siteName}`;

  return (
    <footer className="bg-light">
      <Container>
        <p className="text-center mb-0 small">
          {/* Link to Terms of Service with right margin */}
          <Link to="/tos" className="me-2">
            {t('label', { keyPrefix: 'admin.legal.terms_of_service' })}
          </Link>

          {/* Link to Privacy Policy with right margin for spacing */}
          <Link to="/privacy">
            {t('label', { keyPrefix: 'admin.legal.privacy_policy' })}
          </Link>
        </p>
        <p className="text-center mb-0 small">
          <Trans i18nKey="footer.build_on" values={{ cc }}>
            Powered by
            {/* eslint-disable-next-line react/jsx-no-target-blank */}
            <a href="https://answer.apache.org" target="_blank">
              Apache Answer
            </a>
            - the open-source software that powers Q&A communities.
            <br />
            Made with love. © 2022 Answer.
          </Trans>
        </p>
      </Container>
    </footer>
  );
};

export default React.memo(Index);