terms-of-use.tsx

import Container from 'components/Container';
import Text from 'components/Text';
import Title from 'components/Title';
import { TERMS_PRIVACY } from 'localization/constants';
import { useI18n } from 'localization/helpers';
import { GetServerSideProps } from 'next';
import React, { FC } from 'react';
import FormRow from 'sections/FormRow';

import useStyles from '../screens/terms-privacy-policy/styles';

const loadedData = {};

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { locale } = ctx;
  let data: string[] = [];
  if (loadedData[locale]) {
    data = loadedData[locale];
  } else {
    const res = await import(
      `screens/terms-privacy-policy/translations/${locale}.json`
    );
    data = res.default;
    loadedData[locale] = data;
  }
  return { props: { data } };
};

interface TermsOfUseProps {
  data: any;
}

const TermsOfUse: FC<TermsOfUseProps> = ({ data }) => {
  const i18n = useI18n();
  const classes = useStyles();

  return (
    <Container maxWidth="sm">
      <Title center>{i18n(`${TERMS_PRIVACY}.termsOfUse`)}</Title>

      {data?.map((block) => {
        return (
          <FormRow key={block.id}>
            <Title size="small">{block.title}</Title>

            <ol>
              {block.contents.map((content, index) => {
                return (
                  <li key={String(index)} className={classes.contentListItem}>
                    <Text> {content.text}</Text>
                  </li>
                );
              })}
            </ol>
          </FormRow>
        );
      })}
    </Container>
  );
};

export default TermsOfUse;