46 lines
900 B
Plaintext
46 lines
900 B
Plaintext
---
|
|
interface Props {
|
|
as?: keyof HTMLElementTagNameMap;
|
|
class?: string;
|
|
density?: 'base' | 'compact' | 'spacious';
|
|
id?: string;
|
|
layer?: '1' | '2' | '3';
|
|
tone?: 'default' | 'emphasis' | 'muted';
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
const {
|
|
as = 'section',
|
|
class: className = '',
|
|
density = 'base',
|
|
id,
|
|
layer = '2',
|
|
tone = 'default',
|
|
...rest
|
|
} = Astro.props;
|
|
const Tag = as;
|
|
const densityClasses = {
|
|
compact: 'section-density-compact',
|
|
base: 'section-density-base',
|
|
spacious: 'section-density-spacious',
|
|
};
|
|
const toneClasses = {
|
|
default: '',
|
|
muted: 'section-shell-muted px-3 sm:px-4',
|
|
emphasis: 'section-shell-emphasis px-3 sm:px-4',
|
|
};
|
|
---
|
|
|
|
<Tag
|
|
id={id}
|
|
data-disclosure-layer={layer}
|
|
class:list={[
|
|
densityClasses[density],
|
|
toneClasses[tone],
|
|
className,
|
|
]}
|
|
{...rest}
|
|
>
|
|
<slot />
|
|
</Tag>
|