Page Layout

import { Page } from '$lib/components/layout/index.js';

<script lang="ts">
	import { Page } from '$lib/components/layout/index.js';
</script>

<div class="grid w-full gap-6 xl:grid-cols-3">
	<section class="flex min-w-0 flex-col gap-2">
		<p class="text-sm font-medium">Default</p>
		<Page class="min-h-56 rounded-xl border bg-muted/30">
			<div>
				<p class="text-sm text-muted-foreground">Ordinary page</p>
				<h3 class="text-xl font-semibold">Six-unit content rhythm</h3>
			</div>
			<div class="rounded-lg border bg-card p-4 text-sm text-muted-foreground">
				The page owns its responsive outer padding.
			</div>
		</Page>
	</section>

	<section class="flex min-w-0 flex-col gap-2">
		<p class="text-sm font-medium">Compact</p>
		<Page spacing="compact" class="min-h-56 rounded-xl border bg-muted/30">
			<div>
				<p class="text-sm text-muted-foreground">Dense overview</p>
				<h3 class="text-xl font-semibold">Four-unit content rhythm</h3>
			</div>
			<div class="rounded-lg border bg-card p-4 text-sm text-muted-foreground">
				Outer padding remains aligned with ordinary pages.
			</div>
		</Page>
	</section>

	<section class="flex min-w-0 flex-col gap-2">
		<p class="text-sm font-medium">Nested workspace</p>
		<Page spacing="none" class="min-h-56 rounded-xl border bg-muted/30">
			<div class="border-b px-4 py-3">
				<p class="text-sm text-muted-foreground">Workspace-owned header</p>
				<h3 class="text-xl font-semibold">No implicit page padding</h3>
			</div>
			<div class="flex flex-1 items-center p-4 text-sm text-muted-foreground">
				The parent workspace owns the single padded child region.
			</div>
		</Page>
	</section>
</div>