refactor: move page title into its own component

This commit is contained in:
Stefan Imhoff
2023-04-06 15:13:07 +02:00
parent a28dd5bd11
commit 480cce7adc

View File

@@ -0,0 +1,25 @@
---
import cx from 'classnames';
import { Title } from './Title';
export interface Props {
class?: string;
grid?: 'wide' | 'narrow';
}
const { frontmatter, class: className, grid = 'narrow' } = Astro.props;
const gridVariant = frontmatter.grid || grid;
const titleClasses = cx(
'col-start-2 col-end-18 !mbe-0',
{
'md:col-start-3 md:col-end-17': gridVariant === 'wide',
'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': gridVariant === 'narrow',
},
className
);
---
<Title class={titleClasses}>
{frontmatter.title}
</Title>