aboutsummaryrefslogtreecommitdiffstats
path: root/src/pages/index.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-09-27 15:40:16 +0200
committerArmand Philippot <git@armandphilippot.com>2023-10-24 12:25:00 +0200
commitba793e043e4d8515b1a9ea490ee2c5f92b1fd6c2 (patch)
treef7240a681fb3ee8c886a0c9ec3944082ba2d89bd /src/pages/index.tsx
parent388e687857345c85ee550cd5da472675e05a6ff5 (diff)
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
Diffstat (limited to 'src/pages/index.tsx')
-rw-r--r--src/pages/index.tsx29
1 files changed, 10 insertions, 19 deletions
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,
};