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/components/templates/sectioned/sectioned-layout.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/components/templates/sectioned/sectioned-layout.tsx')
| -rw-r--r-- | src/components/templates/sectioned/sectioned-layout.tsx | 22 |
1 files changed, 9 insertions, 13 deletions
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx index a307688..6d58e83 100644 --- a/src/components/templates/sectioned/sectioned-layout.tsx +++ b/src/components/templates/sectioned/sectioned-layout.tsx @@ -1,9 +1,9 @@ import Script from 'next/script'; -import { FC } from 'react'; -import { BreadcrumbList } from 'schema-dts'; +import type { FC } from 'react'; +import type { BreadcrumbList } from 'schema-dts'; import { Section, type SectionProps, type SectionVariant } from '../../atoms'; -export type PageSection = Pick<SectionProps, 'content' | 'title'>; +export type PageSection = Required<Pick<SectionProps, 'children' | 'id'>>; export type SectionedLayoutProps = { /** @@ -25,27 +25,23 @@ export const SectionedLayout: FC<SectionedLayoutProps> = ({ breadcrumbSchema, sections, }) => { - const getSections = (items: SectionProps[]) => { - return items.map((section, index) => { + const getSections = (items: PageSection[]) => + items.map((section, index) => { const variant: SectionVariant = index % 2 ? 'light' : 'dark'; const isLastSection = index === items.length - 1; return ( - <Section - content={section.content} - key={`section-${index}`} - title={section.title} - variant={variant} - withBorder={!isLastSection} - /> + <Section hasBorder={!isLastSection} key={section.id} variant={variant}> + {section.children} + </Section> ); }); - }; return ( <> <Script dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} + // eslint-disable-next-line react/jsx-no-literals -- Id allowed. id="schema-breadcrumb" type="application/ld+json" /> |
