Files
v10/site/src/components/frames/Minimal.astro
T

40 lines
791 B
Plaintext

---
import { twMerge } from '@/utils/twMerge';
/**
* Minimal frame component for wrapping documentation demos.
*
* Provides a styled container with rounded borders and background
* matching the site's Tabs component aesthetic.
*
* Usage:
* ```mdx
* import Minimal from '@/components/frames/Minimal.astro';
*
* <MinimalFrame>
* <MyDemo client:idle />
* </MinimalFrame>
* ```
*/
type Props = {
class?: string;
margins?: 'default' | 'lg';
};
const { class: className, margins = 'default' } = Astro.props;
const marginClass = margins === 'lg' ? 'my-8' : 'my-4';
---
<div
class={twMerge(
"relative w-full max-w-3xl mx-auto flex rounded-xs overflow-hidden border border-faded-black dark:border-manila-dark",
marginClass,
className,
)}
>
<slot />
</div>