aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/layout')
-rw-r--r--src/components/molecules/layout/card.fixture.ts19
-rw-r--r--src/components/molecules/layout/card.module.scss4
-rw-r--r--src/components/molecules/layout/card.stories.tsx31
-rw-r--r--src/components/molecules/layout/card.test.tsx46
-rw-r--r--src/components/molecules/layout/card.tsx12
-rw-r--r--src/components/molecules/layout/index.ts1
-rw-r--r--src/components/molecules/layout/meta.module.scss16
-rw-r--r--src/components/molecules/layout/meta.stories.tsx45
-rw-r--r--src/components/molecules/layout/meta.test.tsx25
-rw-r--r--src/components/molecules/layout/meta.tsx395
-rw-r--r--src/components/molecules/layout/page-footer.stories.tsx18
-rw-r--r--src/components/molecules/layout/page-footer.tsx8
-rw-r--r--src/components/molecules/layout/page-header.stories.tsx38
-rw-r--r--src/components/molecules/layout/page-header.tsx6
14 files changed, 124 insertions, 540 deletions
diff --git a/src/components/molecules/layout/card.fixture.ts b/src/components/molecules/layout/card.fixture.ts
deleted file mode 100644
index 01fe2e9..0000000
--- a/src/components/molecules/layout/card.fixture.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const cover = {
- alt: 'A picture',
- height: 480,
- src: 'https://picsum.photos/640/480',
- width: 640,
-};
-
-export const id = 'nam';
-
-export const meta = {
- author: 'Possimus',
- thematics: ['Autem', 'Eos'],
-};
-
-export const tagline = 'Ut rerum incidunt';
-
-export const title = 'Alias qui porro';
-
-export const url = '/an-existing-url';
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 7a06508..14a5baf 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -1,5 +1,9 @@
@use "../../../styles/abstracts/functions" as fun;
+.footer {
+ margin-top: auto;
+}
+
.wrapper {
--scale-up: 1.05;
--scale-down: 0.95;
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index a9545d1..070c978 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,6 +1,6 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { MetaItemData } from '../meta-list';
import { Card } from './card';
-import { cover, id, meta, tagline, title, url } from './card.fixture';
/**
* Card - Storybook Meta
@@ -119,6 +119,33 @@ export default {
const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
+const cover = {
+ alt: 'A picture',
+ height: 480,
+ src: 'https://picsum.photos/640/480',
+ width: 640,
+};
+
+const id = 'nam';
+
+const meta = [
+ { id: 'author', label: 'Author', value: 'Possimus' },
+ {
+ id: 'categories',
+ label: 'Categories',
+ value: [
+ { id: 'autem', value: 'Autem' },
+ { id: 'eos', value: 'Eos' },
+ ],
+ },
+] satisfies MetaItemData[];
+
+const tagline = 'Ut rerum incidunt';
+
+const title = 'Alias qui porro';
+
+const url = '/an-existing-url';
+
/**
* Card Stories - Default
*/
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index c6498b8..b690d4c 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,37 +1,69 @@
import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import type { MetaItemData } from '../meta-list';
import { Card } from './card';
-import { cover, id, meta, tagline, title, url } from './card.fixture';
+
+const cover = {
+ alt: 'A picture',
+ height: 480,
+ src: 'https://picsum.photos/640/480',
+ width: 640,
+};
+
+const id = 'nam';
+
+const meta = [
+ { id: 'author', label: 'Author', value: 'Possimus' },
+ {
+ id: 'categories',
+ label: 'Categories',
+ value: [
+ { id: 'autem', value: 'Autem' },
+ { id: 'eos', value: 'Eos' },
+ ],
+ },
+] satisfies MetaItemData[];
+
+const tagline = 'Ut rerum incidunt';
+
+const title = 'Alias qui porro';
+
+const url = '/an-existing-url';
describe('Card', () => {
it('renders a title wrapped in h2 element', () => {
render(<Card id={id} title={title} titleLevel={2} url={url} />);
expect(
- screen.getByRole('heading', { level: 2, name: title })
+ rtlScreen.getByRole('heading', { level: 2, name: title })
).toBeInTheDocument();
});
it('renders a link to another page', () => {
render(<Card id={id} title={title} titleLevel={2} url={url} />);
- expect(screen.getByRole('link')).toHaveAttribute('href', url);
+ expect(rtlScreen.getByRole('link')).toHaveAttribute('href', url);
});
it('renders a cover', () => {
render(
<Card id={id} title={title} titleLevel={2} url={url} cover={cover} />
);
- expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
+ expect(rtlScreen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
});
it('renders a tagline', () => {
render(
<Card id={id} title={title} titleLevel={2} url={url} tagline={tagline} />
);
- expect(screen.getByText(tagline)).toBeInTheDocument();
+ expect(rtlScreen.getByText(tagline)).toBeInTheDocument();
});
it('renders some meta', () => {
render(<Card id={id} title={title} titleLevel={2} url={url} meta={meta} />);
- expect(screen.getByText(meta.author)).toBeInTheDocument();
+
+ const metaLabels = meta.map((item) => item.label);
+
+ for (const label of metaLabels) {
+ expect(rtlScreen.getByText(label)).toBeInTheDocument();
+ }
});
});
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index c316100..d90cba2 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,8 +1,8 @@
import NextImage, { type ImageProps as NextImageProps } from 'next/image';
import type { FC } from 'react';
import { ButtonLink, Figure, Heading, type HeadingLevel } from '../../atoms';
+import { MetaList, type MetaItemData } from '../meta-list';
import styles from './card.module.scss';
-import { Meta, type MetaData } from './meta';
export type CardProps = {
/**
@@ -20,7 +20,7 @@ export type CardProps = {
/**
* The card meta.
*/
- meta?: MetaData;
+ meta?: MetaItemData[];
/**
* The card tagline.
*/
@@ -73,7 +73,13 @@ export const Card: FC<CardProps> = ({
{tagline ? <div className={styles.tagline}>{tagline}</div> : null}
{meta ? (
<footer className={styles.footer}>
- <Meta className={styles.list} data={meta} spacing="sm" />
+ <MetaList
+ className={styles.list}
+ hasBorderedValues={meta.length < 2}
+ hasInlinedValues={meta.length < 2}
+ isCentered
+ items={meta}
+ />
</footer>
) : null}
</article>
diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts
index e43e664..58d5442 100644
--- a/src/components/molecules/layout/index.ts
+++ b/src/components/molecules/layout/index.ts
@@ -1,6 +1,5 @@
export * from './card';
export * from './code';
export * from './columns';
-export * from './meta';
export * from './page-footer';
export * from './page-header';
diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss
deleted file mode 100644
index 26faac3..0000000
--- a/src/components/molecules/layout/meta.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.list {
- .description:not(:first-of-type) {
- &::before {
- display: inline;
- float: left;
- content: "/";
- margin-right: var(--itemSpacing);
- }
- }
-
- &--stack {
- .term {
- flex: 0 0 100%;
- }
- }
-}
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
deleted file mode 100644
index 6faa265..0000000
--- a/src/components/molecules/layout/meta.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Meta as MetaComponent, type MetaData } from './meta';
-
-/**
- * Meta - Storybook Meta
- */
-export default {
- title: 'Molecules/Layout',
- component: MetaComponent,
- args: {},
- argTypes: {
- data: {
- description: 'The page metadata.',
- type: {
- name: 'object',
- required: true,
- value: {},
- },
- },
- },
-} as ComponentMeta<typeof MetaComponent>;
-
-const Template: ComponentStory<typeof MetaComponent> = (args) => (
- <MetaComponent {...args} />
-);
-
-const data: MetaData = {
- publication: { date: '2022-04-09', time: '01:04:00' },
- thematics: [
- <a key="category1" href="#a">
- Category 1
- </a>,
- <a key="category2" href="#b">
- Category 2
- </a>,
- ],
-};
-
-/**
- * Layout Stories - Meta
- */
-export const Meta = Template.bind({});
-Meta.args = {
- data,
-};
diff --git a/src/components/molecules/layout/meta.test.tsx b/src/components/molecules/layout/meta.test.tsx
deleted file mode 100644
index 0635fc3..0000000
--- a/src/components/molecules/layout/meta.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { getFormattedDate } from '../../../utils/helpers';
-import { Meta } from './meta';
-
-const data = {
- publication: { date: '2022-04-09' },
- thematics: [
- <a key="category1" href="#a">
- Category 1
- </a>,
- <a key="category2" href="#b">
- Category 2
- </a>,
- ],
-};
-
-describe('Meta', () => {
- it('format a date string', () => {
- render(<Meta data={data} />);
- expect(
- rtlScreen.getByText(getFormattedDate(data.publication.date))
- ).toBeInTheDocument();
- });
-});
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
deleted file mode 100644
index 63909a4..0000000
--- a/src/components/molecules/layout/meta.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { useIntl } from 'react-intl';
-import { getFormattedDate, getFormattedTime } from '../../../utils/helpers';
-import {
- DescriptionList,
- type DescriptionListProps,
- Link,
- Group,
- Term,
- Description,
-} from '../../atoms';
-import styles from './meta.module.scss';
-
-export type CustomMeta = {
- label: string;
- value: ReactNode;
-};
-
-export type MetaComments = {
- /**
- * A page title.
- */
- about: string;
- /**
- * The comments count.
- */
- count: number;
- /**
- * Wrap the comments count with a link to the given target.
- */
- target?: string;
-};
-
-export type MetaDate = {
- /**
- * A date string. Ex: `2022-04-30`.
- */
- date: string;
- /**
- * A time string. Ex: `10:25:59`.
- */
- time?: string;
- /**
- * Wrap the date with a link to the given target.
- */
- target?: string;
-};
-
-export type MetaData = {
- /**
- * The author name.
- */
- author?: string;
- /**
- * The comments count.
- */
- comments?: MetaComments;
- /**
- * The creation date.
- */
- creation?: MetaDate;
- /**
- * A custom label/value metadata.
- */
- custom?: CustomMeta;
- /**
- * The license name.
- */
- license?: string;
- /**
- * The popularity.
- */
- popularity?: string | JSX.Element;
- /**
- * The publication date.
- */
- publication?: MetaDate;
- /**
- * The estimated reading time.
- */
- readingTime?: string | JSX.Element;
- /**
- * An array of repositories.
- */
- repositories?: string[] | JSX.Element[];
- /**
- * An array of technologies.
- */
- technologies?: string[];
- /**
- * An array of thematics.
- */
- thematics?: string[] | JSX.Element[];
- /**
- * An array of thematics.
- */
- topics?: string[] | JSX.Element[];
- /**
- * A total number of posts.
- */
- total?: number;
- /**
- * The update date.
- */
- update?: MetaDate;
- /**
- * An url.
- */
- website?: string;
-};
-
-const isCustomMeta = (
- key: keyof MetaData,
- _value: unknown
-): _value is MetaData['custom'] => key === 'custom';
-
-export type MetaProps = Omit<DescriptionListProps, 'children'> & {
- /**
- * The meta data.
- */
- data: MetaData;
-};
-
-/**
- * Meta component
- *
- * Renders the given metadata.
- */
-export const Meta: FC<MetaProps> = ({
- className = '',
- data,
- isInline = false,
- ...props
-}) => {
- const layoutClass = styles[isInline ? 'list--inline' : 'list--stack'];
- const listClass = `${styles.list} ${layoutClass} ${className}`;
- const intl = useIntl();
-
- /**
- * Retrieve the item label based on its key.
- *
- * @param {keyof MetaData} key - The meta key.
- * @returns {string} The item label.
- */
- const getLabel = (key: keyof MetaData): string => {
- switch (key) {
- case 'author':
- return intl.formatMessage({
- defaultMessage: 'Written by:',
- description: 'Meta: author label',
- id: 'OI0N37',
- });
- case 'comments':
- return intl.formatMessage({
- defaultMessage: 'Comments:',
- description: 'Meta: comments label',
- id: 'jTVIh8',
- });
- case 'creation':
- return intl.formatMessage({
- defaultMessage: 'Created on:',
- description: 'Meta: creation date label',
- id: 'b4fdYE',
- });
- case 'license':
- return intl.formatMessage({
- defaultMessage: 'License:',
- description: 'Meta: license label',
- id: 'AuGklx',
- });
- case 'popularity':
- return intl.formatMessage({
- defaultMessage: 'Popularity:',
- description: 'Meta: popularity label',
- id: 'pWTj2W',
- });
- case 'publication':
- return intl.formatMessage({
- defaultMessage: 'Published on:',
- description: 'Meta: publication date label',
- id: 'QGi5uD',
- });
- case 'readingTime':
- return intl.formatMessage({
- defaultMessage: 'Reading time:',
- description: 'Meta: reading time label',
- id: 'EbFvsM',
- });
- case 'repositories':
- return intl.formatMessage({
- defaultMessage: 'Repositories:',
- description: 'Meta: repositories label',
- id: 'DssFG1',
- });
- case 'technologies':
- return intl.formatMessage({
- defaultMessage: 'Technologies:',
- description: 'Meta: technologies label',
- id: 'ADQmDF',
- });
- case 'thematics':
- return intl.formatMessage({
- defaultMessage: 'Thematics:',
- description: 'Meta: thematics label',
- id: 'bz53Us',
- });
- case 'topics':
- return intl.formatMessage({
- defaultMessage: 'Topics:',
- description: 'Meta: topics label',
- id: 'gJNaBD',
- });
- case 'total':
- return intl.formatMessage({
- defaultMessage: 'Total:',
- description: 'Meta: total label',
- id: '92zgdp',
- });
- case 'update':
- return intl.formatMessage({
- defaultMessage: 'Updated on:',
- description: 'Meta: update date label',
- id: 'tLC7bh',
- });
- case 'website':
- return intl.formatMessage({
- defaultMessage: 'Official website:',
- description: 'Meta: official website label',
- id: 'GRyyfy',
- });
- default:
- return '';
- }
- };
-
- /**
- * Retrieve a formatted date (and time).
- *
- * @param {MetaDate} dateTime - A date object.
- * @returns {JSX.Element} The formatted date wrapped in a time element.
- */
- const getDate = (dateTime: MetaDate): JSX.Element => {
- const { date, time, target } = dateTime;
-
- if (!dateTime.time) {
- const isoDate = new Date(`${date}`).toISOString();
- return target ? (
- <Link href={target}>
- <time dateTime={isoDate}>{getFormattedDate(dateTime.date)}</time>
- </Link>
- ) : (
- <time dateTime={isoDate}>{getFormattedDate(dateTime.date)}</time>
- );
- }
-
- const isoDateTime = new Date(`${date}T${time}`).toISOString();
- const dateString = intl.formatMessage(
- {
- defaultMessage: '{date} at {time}',
- description: 'Meta: publication date and time',
- id: 'fcHeyC',
- },
- {
- date: getFormattedDate(dateTime.date),
- time: getFormattedTime(`${dateTime.date}T${dateTime.time}`),
- }
- );
-
- return target ? (
- <Link href={target}>
- <time dateTime={isoDateTime}>{dateString}</time>
- </Link>
- ) : (
- <time dateTime={isoDateTime}>{dateString}</time>
- );
- };
-
- /**
- * Retrieve the formatted comments count.
- *
- * @param comments - The comments object.
- * @returns {string | JSX.Element} - The comments count.
- */
- const getCommentsCount = (comments: MetaComments): string | JSX.Element => {
- const { about, count, target } = comments;
- const commentsCount = intl.formatMessage(
- {
- defaultMessage:
- '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
- description: 'Meta: comments count',
- id: '02rgLO',
- },
- {
- a11y: (chunks: ReactNode) => (
- <span className="screen-reader-text">{chunks}</span>
- ),
- commentsCount: count,
- title: about,
- }
- );
-
- return target ? (
- <Link href={target}>{commentsCount as JSX.Element}</Link>
- ) : (
- (commentsCount as JSX.Element)
- );
- };
-
- /**
- * Retrieve the formatted item value.
- *
- * @param {keyof MetaData} key - The meta key.
- * @param {ValueOf<MetaData>} value - The meta value.
- * @returns {string|ReactNode|ReactNode[]} - The formatted value.
- */
- const getValue = <T extends keyof MetaData>(
- key: T,
- value: MetaData[T]
- ): string | ReactNode | ReactNode[] => {
- switch (key) {
- case 'comments':
- return getCommentsCount(value as MetaComments);
- case 'creation':
- case 'publication':
- case 'update':
- return getDate(value as MetaDate);
- case 'total':
- return intl.formatMessage(
- {
- defaultMessage:
- '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
- description: 'BlogPage: posts count meta',
- id: 'OF5cPz',
- },
- { postsCount: value as number }
- );
- case 'website':
- return typeof value === 'string' ? (
- <Link href={value} isExternal>
- {value}
- </Link>
- ) : null;
- default:
- return value as string | ReactNode | ReactNode[];
- }
- };
-
- /**
- * Transform the metadata to description list item format.
- *
- * @param {MetaData} items - The meta.
- * @returns {DescriptionListItem[]} The formatted description list items.
- */
- const getItems = (items: MetaData) => {
- const entries = Object.entries(items) as [
- keyof MetaData,
- MetaData[keyof MetaData],
- ][];
- const listItems = entries.map(([key, meta]) => {
- if (!meta) return null;
-
- return (
- <Group isInline key={key} spacing="2xs">
- <Term className={styles.term}>
- {isCustomMeta(key, meta) ? meta.label : getLabel(key)}
- </Term>
- {Array.isArray(meta) ? (
- meta.map((singleMeta, index) => (
- /* eslint-disable-next-line react/no-array-index-key -- Unsafe,
- * but also temporary. This component should be removed or
- * refactored. */
- <Description className={styles.description} key={index}>
- {isCustomMeta(key, singleMeta)
- ? singleMeta
- : getValue(key, singleMeta)}
- </Description>
- ))
- ) : (
- <Description className={styles.description}>
- {isCustomMeta(key, meta) ? meta.value : getValue(key, meta)}
- </Description>
- )}
- </Group>
- );
- });
-
- return listItems;
- };
-
- return (
- <DescriptionList {...props} className={listClass} isInline={isInline}>
- {getItems(data)}
- </DescriptionList>
- );
-};
diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx
index 8e991a4..48c8c17 100644
--- a/src/components/molecules/layout/page-footer.stories.tsx
+++ b/src/components/molecules/layout/page-footer.stories.tsx
@@ -1,5 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { MetaData } from './meta';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { PageFooter as PageFooterComponent } from './page-footer';
/**
@@ -40,16 +39,17 @@ const Template: ComponentStory<typeof PageFooterComponent> = (args) => (
<PageFooterComponent {...args} />
);
-const meta: MetaData = {
- custom: {
+const meta = [
+ {
+ id: 'more-about',
label: 'More posts about:',
- value: [
- <a key="topic-1" href="#">
+ value: (
+ <a key="topic-1" href="#topic1">
Topic name
- </a>,
- ],
+ </a>
+ ),
},
-};
+];
/**
* Page Footer Stories - With meta
diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index 375cbc4..a93fced 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -1,12 +1,12 @@
import type { FC } from 'react';
import { Footer, type FooterProps } from '../../atoms';
-import { Meta, type MetaData } from './meta';
+import { MetaList, type MetaItemData } from '../meta-list';
export type PageFooterProps = Omit<FooterProps, 'children'> & {
/**
* The footer metadata.
*/
- meta?: MetaData;
+ meta?: MetaItemData[];
};
/**
@@ -15,5 +15,7 @@ export type PageFooterProps = Omit<FooterProps, 'children'> & {
* Render a footer to display page meta.
*/
export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => (
- <Footer {...props}>{meta ? <Meta data={meta} /> : null}</Footer>
+ <Footer {...props}>
+ {meta ? <MetaList hasInlinedValues items={meta} /> : null}
+ </Footer>
);
diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx
index ea943bf..54d5fe8 100644
--- a/src/components/molecules/layout/page-header.stories.tsx
+++ b/src/components/molecules/layout/page-header.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { PageHeader } from './page-header';
/**
@@ -62,17 +62,31 @@ const Template: ComponentStory<typeof PageHeader> = (args) => (
<PageHeader {...args} />
);
-const meta = {
- publication: { date: '2022-04-09' },
- thematics: [
- <a key="category1" href="#">
- Category 1
- </a>,
- <a key="category2" href="#">
- Category 2
- </a>,
- ],
-};
+const meta = [
+ { id: 'publication-date', label: 'Published on:', value: '2022-04-09' },
+ {
+ id: 'thematics',
+ label: 'Thematics:',
+ value: [
+ {
+ id: 'cat-1',
+ value: (
+ <a key="category1" href="#cat1">
+ Category 1
+ </a>
+ ),
+ },
+ {
+ id: 'cat-2',
+ value: (
+ <a key="category2" href="#cat2">
+ Category 2
+ </a>
+ ),
+ },
+ ],
+ },
+];
/**
* Page Header Stories - Default
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index b727cc1..ea0dd2c 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,6 +1,6 @@
import type { FC, ReactNode } from 'react';
import { Header, Heading } from '../../atoms';
-import { Meta, type MetaData } from './meta';
+import { MetaList, type MetaItemData } from '../meta-list';
import styles from './page-header.module.scss';
export type PageHeaderProps = {
@@ -15,7 +15,7 @@ export type PageHeaderProps = {
/**
* The page metadata.
*/
- meta?: MetaData;
+ meta?: MetaItemData[];
/**
* The page title.
*/
@@ -56,7 +56,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
{title}
</Heading>
{meta ? (
- <Meta className={styles.meta} data={meta} isInline spacing="xs" />
+ <MetaList className={styles.meta} hasInlinedItems items={meta} />
) : null}
{intro ? getIntro() : null}
</div>
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:30:25 +0000