diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-27 15:40:16 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:25:00 +0200 |
| commit | ba793e043e4d8515b1a9ea490ee2c5f92b1fd6c2 (patch) | |
| tree | f7240a681fb3ee8c886a0c9ec3944082ba2d89bd /src/pages/index.tsx | |
| parent | 388e687857345c85ee550cd5da472675e05a6ff5 (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.tsx | 29 |
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, }; |
