From ba793e043e4d8515b1a9ea490ee2c5f92b1fd6c2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 27 Sep 2023 15:40:16 +0200
Subject: refactor(components): rewrite Section component

* Make it compliant with ESlint rules
* Remove mandatory heading, it now depends on the consumer
* Change defaults for hasBorder and variant
---
 src/pages/index.tsx | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

(limited to 'src/pages/index.tsx')

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 816e44e..c06fb7e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,7 +2,7 @@ import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import Script from 'next/script';
-import { type FC, type ReactNode, isValidElement } from 'react';
+import type { FC } from 'react';
 import { useIntl } from 'react-intl';
 import FeedIcon from '../assets/images/icon-feed.svg';
 import {
@@ -226,24 +226,15 @@ const StyledColumns = (props: ColumnsProps) => (
  * @param {ReactNode[]} obj.children - The section body.
  * @returns {JSX.Element} A section element.
  */
-const getSection = ({
+const HomePageSection: FC<SectionProps> = ({
   children,
+  hasBorder = true,
   variant,
-}: {
-  children: ReactNode[];
-  variant: SectionProps['variant'];
-}): JSX.Element => {
-  const [headingEl, ...content] = children;
-
-  return (
-    <Section
-      className={styles.section}
-      content={content}
-      title={isValidElement(headingEl) ? headingEl.props.children : ''}
-      variant={variant}
-    />
-  );
-};
+}) => (
+  <Section className={styles.section} hasBorder={hasBorder} variant={variant}>
+    {children}
+  </Section>
+);
 
 type HomeProps = {
   recentPosts: ArticleCard[];
@@ -277,7 +268,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
     });
     const listClass = `${styles.list} ${styles['list--cards']}`;
 
-    return <CardsList items={posts} titleLevel={3} className={listClass} />;
+    return <CardsList className={listClass} items={posts} titleLevel={3} />;
   };
 
   const components: MDXComponents = {
@@ -289,7 +280,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
     LibreLinks,
     MoreLinks,
     RecentPosts: getRecentPosts,
-    Section: getSection,
+    Section: HomePageSection,
     ShaarliLink,
   };
 
-- 
cgit v1.2.3