Main.module.scss « Main « components « src - www.armandphilippot.com - The frontend of my personal website.

about summary refs log tree commit diff stats

path: root/src/components/Main/Main.module.scss

blob: 819474c41f2eaa295f51b764e18da5c571ea2e0c (plain)

.wrapper {
  flex: 1;

  :global {
    animation: fade-in 1.5s ease-in-out 0s 1;
  }
}

-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

import { t } from '@lingui/macro';
import { PostsList as PostsListData } from '@ts/types/blog';
import styles from './PostsList.module.scss';
import PostPreview from '@components/PostPreview/PostPreview';
import { Fragment } from 'react';
import { sortPostsByYear } from '@utils/helpers/sort';

const PostsList = ({
  data,
  showYears,
}: {
  data: PostsListData[];
  showYears: boolean;
}) => {
  const titleLevel = showYears ? 3 : 2;

  const getPostsListByYear = () => {
    const posts = sortPostsByYear(data);
    const years = Object.keys(posts).reverse();

    return years.map((year) => {
      return (
        <section key={year} className={styles.section}>
          {showYears && <h2 className={styles.year}>{year}</h2>}
          <ol className={styles.list}>
            {posts[year].map((post) => {
              return (
                <li key={post.id} className={styles.item}>
                  <PostPreview post={post} titleLevel={titleLevel} />
                </li>
              );
            })}
          </ol>
        </section>
      );
    });
  };

  const getPostsList = () => {
    return data.map((page) => {
      if (page.posts.length === 0) {
        return <p key="no-result">{t`No results found.`}</p>;
      } else {
        return (
          <Fragment key={page.pageInfo.endCursor}>
            <ol className={styles.list}>
              {page.posts.map((post) => {
                return (
                  <li key={post.id} className={styles.item}>
                    <PostPreview post={post} titleLevel={titleLevel} />
                  </li>
                );
              })}
            </ol>
          </Fragment>
        );
      }
    });
  };

  return <>{showYears ? getPostsListByYear() : getPostsList()}</>;
};

export default PostsList;