---
/**
* BentoTile — a single bento grid cell.
*
* Props:
* span: 3 | 4 | 5 | 6 | 7 | 8 | 12 (default 6)
* rows: 1 | 2 | 3 (default 1)
* surface: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral'
* minHeight: optional inline min-height CSS value
* eyebrow: optional small uppercase label above title
* title: optional H2 title
* reveal: boolean, animate on scroll into view (default true)
*
* Example:
*
* ...content...
*
*/
interface Props {
span?: 3 | 4 | 5 | 6 | 7 | 8 | 12;
rows?: 1 | 2 | 3;
surface?: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral';
minHeight?: string;
eyebrow?: string;
title?: string;
reveal?: boolean;
class?: string;
}
const {
span = 6,
rows = 1,
surface = 'white',
minHeight,
eyebrow,
title,
reveal = true,
class: className = '',
} = Astro.props;
const spanClass = `span-${span}`;
const rowsClass = rows > 1 ? `rows-${rows}` : '';
const surfaceClass = `surface-${surface}`;
const revealClass = reveal ? 'reveal' : '';
---
{eyebrow &&
{eyebrow}
}
{title &&
{title}
}