Gwk-Cultural-Park/components/BlogHeader.tsx
2024-09-07 08:40:25 +07:00

49 lines
1.2 KiB
TypeScript

import { PortableText } from '@portabletext/react'
import Link from 'next/link'
import styles from './BlogHeader.module.css'
export default function BlogHeader({
title,
description,
level,
}: {
title: string
description?: any[]
level: 1 | 2
}) {
switch (level) {
case 1:
return (
<header className="mb-10 mt-16 flex flex-col items-center md:mb-12 md:flex-row md:justify-between">
<h1 className="text-6xl font-bold leading-tight tracking-tighter md:pr-8 md:text-8xl">
{/* {title} */}
</h1>
<h4
className={`mt-5 text-center text-lg md:pl-8 md:text-left ${styles.portableText}`}
>
<PortableText value={description} />
</h4>
</header>
)
case 2:
return (
<header>
<h2 className="text-2xl font-bold leading-tight tracking-tight md:text-4xl md:tracking-tighter">
<Link href="/" className="">
{/* {title} */}
</Link>
</h2>
</header>
)
default:
throw new Error(
`Invalid level: ${
JSON.stringify(level) || typeof level
}, only 1 or 2 are allowed`
)
}
}