Files
v10/site/src/components/frames/ContentWidth.astro
T
2026-02-02 16:42:03 -06:00

33 lines
698 B
Plaintext

---
import { twMerge } from 'tailwind-merge';
/**
* ContentWidth frame component for constraining content width.
*
* Applies the standard max-width constraint used throughout the docs
* without any visual styling (borders, backgrounds).
*
* Usage:
* ```mdx
* import ContentWidth from '@/components/frames/ContentWidth.astro';
*
* <ContentWidth>
* <MyComponent client:idle />
* </ContentWidth>
* ```
*/
type Props = {
class?: string;
margins?: 'default' | 'lg';
};
const { class: className, margins = 'default' } = Astro.props;
const marginClass = margins === 'lg' ? 'my-12' : 'my-6';
---
<div class={twMerge('max-w-3xl mx-auto', marginClass, className)}>
<slot />
</div>