website-astro-stefanimhoff.de/src/layouts/GridLayout.astro

---
// Cspell:words astro fullsize noindex
import BaseLayout from './BaseLayout.astro';

export interface Props {
	backLink?: string;
	class?: string;
	cover?: string;
	description?: string;
	footer?: boolean;
	gap?: boolean;
	grid?: 'fullsize' | 'wide' | 'narrow';
	header?: boolean;
	innerGrid?: boolean;
	nofollow?: boolean;
	noindex?: boolean;
	title: string;
}

const {
	backLink,
	class: className,
	cover,
	description,
	footer = true,
	gap = true,
	grid = 'narrow',
	header,
	innerGrid,
	nofollow,
	noindex,
	title,
} = Astro.props;
---

<BaseLayout
	backLink={backLink}
	cover={cover}
	description={description}
	footer={footer}
	header={header}
	nofollow={nofollow}
	noindex={noindex}
	title={title}
>
	<div class:list={['grid w-full grid-cols-18', { 'gap-y-gap': gap }, className]}>
		<slot name="title" />
		<slot name="before-content" />
		{
			grid !== 'fullsize' ? (
				<div
					class:list={[
						{ 'col-start-2 col-end-18': grid === 'wide' || grid === 'narrow' },
						{
							'md:col-start-5 md:col-end-15 xl:col-start-6 xl:col-end-14 3xl:col-start-7 3xl:col-end-13':
								grid === 'narrow',
						},
						{ 'md:col-start-3 md:col-end-17': grid === 'wide' },
						{ 'grid w-full': innerGrid },
						{ 'grid-cols-16 md:grid-cols-14': innerGrid && grid === 'wide' },
						{
							'grid-cols-16 md:grid-cols-10 xl:grid-cols-8 3xl:grid-cols-6':
								innerGrid && grid === 'narrow',
						},
						{ 'gap-y-gap': gap },
					]}
				>
					<slot />
				</div>
			) : (
				<slot />
			)
		}
		<slot name="after-content" />
	</div>
</BaseLayout>