maizzle/src/components/divider.html
<script props>
// https://maizzle.com/docs/components/divider
module.exports = {
height: props.height || '1px',
color: props.color, // any CSS color value
top: props.top, // top margin
bottom: props.bottom, // bottom margin
left: props.left, // left margin
right: props.right, // right margin
spaceY: props['space-y'] || '24px', // top and bottom margin
spaceX: props['space-x'], // right and left margin
hasBgClass: props.class && props.class.split(' ').some(c => c.startsWith('bg-')),
}
</script>
<div
role="separator"
class="{{ (!color && !hasBgClass) && 'bg-slate-300' }}"
style="height: {{ height }};
line-height: {{ height }};
{{ color && `background-color: ${color}` }};
margin: 0;
{{ spaceY && `margin-top: ${spaceY}; margin-bottom: ${spaceY}` }};
{{ spaceX && `margin-left: ${spaceX}; margin-right: ${spaceX}` }};
{{ top && `margin-top: ${top}` }};
{{ bottom && `margin-bottom: ${bottom}` }};
{{ left && `margin-left: ${left}` }};
{{ right && `margin-right: ${right}` }};
"
>‍</div>