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

Code before:
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

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-3">
            {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="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>
  );

Review comment (suggestion):
class should be `me-2`

and https://github.com/apache/incubator-answer/pull/1217#issuecomment-2565287567

Code after:
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

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>
  );
};