1import React, {type ReactNode} from 'react';
2import clsx from 'clsx';
3import Link from '@docusaurus/Link';
4import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
5import type {Props} from '@theme/BlogPostItem/Header/Title';
6
7import styles from './styles.module.css';
8
9export default function BlogPostItemHeaderTitle({className}: Props): ReactNode {
10  const {metadata, isBlogPostPage} = useBlogPost();
11  const {permalink, title} = metadata;
12  const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
13  return (
14    <TitleHeading className={clsx(styles.title, className)}>
15      {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
16    </TitleHeading>
17  );
18}
19

1import React, {type ReactNode} from 'react';
2import clsx from 'clsx';
3import Link from '@docusaurus/Link';
4import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
5import type {Props} from '@theme/BlogPostItem/Header/Title';
6
7import styles from './styles.module.css';
8
9export default function BlogPostItemHeaderTitle({className}: Props): ReactNode {
10  const {metadata, isBlogPostPage} = useBlogPost();
11  const {permalink, title} = metadata;
12  const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
13  return (
14    <TitleHeading className={clsx(styles.title, className)}>
15      {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
16    </TitleHeading>
17  );
18}
19