diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-20 16:38:54 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-09-20 16:38:54 +0200 |
| commit | f861e6a269ba9f62700776d3cd13b644a9e836d4 (patch) | |
| tree | a5a107e7a6e4ff8b4261fe04349357bc00b783ee /src/components/templates/page/page-layout.tsx | |
| parent | 03331c44276ec56e9f235e4d5ee75030455a753f (diff) | |
refactor: use named export for everything except pages
Next expect a default export for pages so only those components should
use default exports. Everything else should use named exports to
reduce the number of import statements.
Diffstat (limited to 'src/components/templates/page/page-layout.tsx')
| -rw-r--r-- | src/components/templates/page/page-layout.tsx | 59 |
1 files changed, 27 insertions, 32 deletions
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx index 6792724..3c6ff17 100644 --- a/src/components/templates/page/page-layout.tsx +++ b/src/components/templates/page/page-layout.tsx @@ -2,29 +2,26 @@ import Script from 'next/script'; import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react'; import { useIntl } from 'react-intl'; import { BreadcrumbList } from 'schema-dts'; -import { sendComment } from '../../../services/graphql/comments'; -import { SendCommentInput } from '../../../types/graphql/mutations'; -import useIsMounted from '../../../utils/hooks/use-is-mounted'; -import Heading from '../../atoms/headings/heading'; -import Notice, { type NoticeKind } from '../../atoms/layout/notice'; -import Sidebar from '../../atoms/layout/sidebar'; -import { MetaData } from '../../molecules/layout/meta'; -import PageFooter, { +import { sendComment } from '../../../services/graphql'; +import { SendCommentInput } from '../../../types'; +import { useIsMounted } from '../../../utils/hooks'; +import { Heading, Notice, type NoticeKind, Sidebar } from '../../atoms'; +import { + Breadcrumb, + type BreadcrumbItem, + MetaData, + PageFooter, type PageFooterProps, -} from '../../molecules/layout/page-footer'; -import PageHeader, { + PageHeader, type PageHeaderProps, -} from '../../molecules/layout/page-header'; -import Breadcrumb, { - type BreadcrumbItem, -} from '../../molecules/nav/breadcrumb'; -import CommentForm, { +} from '../../molecules'; +import { + CommentForm, type CommentFormProps, -} from '../../organisms/forms/comment-form'; -import CommentsList, { + CommentsList, type CommentsListProps, -} from '../../organisms/layout/comments-list'; -import TableOfContents from '../../organisms/widgets/table-of-contents'; + TableOfContents, +} from '../../organisms'; import styles from './page-layout.module.scss'; export type PageLayoutProps = { @@ -91,7 +88,7 @@ export type PageLayoutProps = { * * Render the pages layout. */ -const PageLayout: FC<PageLayoutProps> = ({ +export const PageLayout: FC<PageLayoutProps> = ({ children, allowComments = false, bodyAttributes, @@ -186,29 +183,29 @@ const PageLayout: FC<PageLayoutProps> = ({ return ( <> <Script + dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} id="schema-breadcrumb" type="application/ld+json" - dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} /> <Breadcrumb - items={breadcrumb} className={styles.breadcrumb} itemClassName={styles.breadcrumb__items} + items={breadcrumb} /> <PageHeader - title={title} + className={styles.header} intro={intro} meta={headerMeta} - className={styles.header} + title={title} /> {withToC && ( <Sidebar - className={`${styles.sidebar} ${styles['sidebar--first']}`} aria-label={intl.formatMessage({ defaultMessage: 'Table of contents sidebar', id: 'Q+1GbT', description: 'PageLayout: accessible name for ToC sidebar', })} + className={`${styles.sidebar} ${styles['sidebar--first']}`} > {isMounted && bodyRef.current && ( <TableOfContents wrapper={bodyRef.current} /> @@ -217,10 +214,10 @@ const PageLayout: FC<PageLayoutProps> = ({ )} {typeof children === 'string' ? ( <div - ref={bodyRef} + {...bodyAttributes} className={`${styles.body} ${bodyClassName}`} dangerouslySetInnerHTML={{ __html: children }} - {...bodyAttributes} + ref={bodyRef} /> ) : ( <div ref={bodyRef} className={`${styles.body} ${bodyClassName}`}> @@ -231,12 +228,12 @@ const PageLayout: FC<PageLayoutProps> = ({ <PageFooter meta={footerMeta} className={styles.footer} /> )} <Sidebar - className={`${styles.sidebar} ${styles['sidebar--last']}`} aria-label={intl.formatMessage({ defaultMessage: 'Sidebar', id: 'c556Qo', description: 'PageLayout: accessible name for the sidebar', })} + className={`${styles.sidebar} ${styles['sidebar--last']}`} > {widgets} </Sidebar> @@ -253,9 +250,9 @@ const PageLayout: FC<PageLayoutProps> = ({ Notice={ isReplyRef.current === true && ( <Notice + className={styles.notice} kind={status} message={statusMessage} - className={styles.notice} /> ) } @@ -280,9 +277,9 @@ const PageLayout: FC<PageLayoutProps> = ({ Notice={ isReplyRef.current === false && ( <Notice + className={styles.notice} kind={status} message={statusMessage} - className={styles.notice} /> ) } @@ -293,5 +290,3 @@ const PageLayout: FC<PageLayoutProps> = ({ </> ); }; - -export default PageLayout; |
