57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { type RichTextItemResponse } from '@notionhq/client/build/src/api-endpoints'
|
|
import clsx from 'clsx'
|
|
import dynamic from 'next/dynamic'
|
|
import { type FC, Suspense } from 'react'
|
|
|
|
import HybridLink from './HybridLink'
|
|
|
|
const TeX = dynamic(() => import('@matejmazur/react-katex'))
|
|
|
|
const RichText: FC<{ richText: RichTextItemResponse[] }> = ({ richText }) => {
|
|
return (
|
|
<>
|
|
{richText.map((text, index) => {
|
|
if (text.type === 'mention') return null // TODO
|
|
else if (text.type === 'text') {
|
|
const className = clsx({
|
|
italic: text.annotations.italic,
|
|
'font-bold': text.annotations.bold,
|
|
underline: text.annotations.underline,
|
|
'dark:bg-neutral-800 border-1 dark:border-neutral-500 font-mono dark:text-red-400 p-1 rounded':
|
|
text.annotations.code,
|
|
})
|
|
|
|
if (text.href) {
|
|
return (
|
|
<HybridLink
|
|
key={index}
|
|
href={text.href}
|
|
className={clsx(
|
|
'underline transition-colors dark:hover:text-teal-500',
|
|
className,
|
|
)}
|
|
>
|
|
{text.plain_text}
|
|
</HybridLink>
|
|
)
|
|
}
|
|
|
|
const Tag = text.annotations.strikethrough ? 's' : 'span'
|
|
return (
|
|
<Tag key={index} className={className}>
|
|
{text.plain_text}
|
|
</Tag>
|
|
)
|
|
} else if (text.type === 'equation')
|
|
return (
|
|
<Suspense key={index} fallback="Loading...">
|
|
<TeX block={false}>{text.equation.expression}</TeX>
|
|
</Suspense>
|
|
)
|
|
})}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default RichText
|