devscard/src/web/sections/favorites/favorites-sub-section.astro

28 lines
659 B
Text

---
import type { SubSection } from '@/types/sections/favorites-section.types';
import Typography from '@/web/components/typography.astro';
export interface Props {
subSection?: SubSection;
minTileWidth: number;
}
const { subSection, minTileWidth } = Astro.props;
---
{
subSection && (
<div class="flex flex-col gap-6">
<Typography variant="section-subtitle">{subSection.title}</Typography>
<div class="tile grid gap-8" style={{ '--min-tile-width': `${minTileWidth}px` }}>
<slot />
</div>
</div>
)
}
<style>
.tile {
grid-template-columns: repeat(auto-fill, minmax(var(--min-tile-width), 1fr));
}
</style>