Flow

---
import { twMerge as tw } from 'tailwind-merge';

interface Props {
	as?: string;
	class?: string;
	direction?: 'vertical' | 'horizontal';
	space?:
		| 'none'
		| 'xs'
		| 'sm'
		| 'md'
		| 'lg'
		| 'xl'
		| '2xl'
		| '3xl'
		| '4xl'
		| '5xl';
	wrap?: boolean;
}

const {
	as = 'div',
	class: className,
	direction = 'vertical',
	space = 'md',
	wrap = false,
} = Astro.props;
const TagName = as;

const spacing = {
	horizontal: {
		none: 'gap-0',
		xs: 'gap-1',
		sm: 'gap-2',
		md: 'gap-4',
		lg: 'gap-6',
		xl: 'gap-8',
		'2xl': 'gap-12',
		'3xl': 'gap-16',
		'4xl': 'gap-20',
		'5xl': 'gap-28',
	},
	vertical: {
		none: 'flow-space-0',
		xs: 'flow-space-1',
		sm: 'flow-space-2',
		md: 'flow-space-4',
		lg: 'flow-space-6',
		xl: 'flow-space-8',
		'2xl': 'flow-space-12',
		'3xl': 'flow-space-16',
		'4xl': 'flow-space-20',
		'5xl': 'flow-space-28',
	},
};
---

<TagName
	class={tw(
		direction === 'vertical' && 'flow',
		direction === 'horizontal' && 'flex',
		direction === 'horizontal' && wrap && 'flex-wrap',
		spacing[direction][space],
		className
	)}
>
	<slot />
</TagName>

This component is available with our Astro Starter Kit.

The Flow component can be used to manage the spacing between elements. By default, it’s a vertical flow but you can also manage horizontal flow content.

Usage

Import the component where you need to use it:

---
import Flow from '@components/Flow.astro';
---

<Flow>
	<h1>Title</h1>
	<p>Content</p>
</Flow>

Space

You can control the space between items using the space prop, like this:

<Flow space="sm"></Flow>

Valid space values are: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl and 5xl.

Direction

You can also control the direction of the flow using the direction prop, like this:

<Flow space="lg" direction="horizontal">
	<p>This content flows horizontally.</p>
	<p>Lovely.</p>
</Flow>

By default, horizontal content will not wrap. You can enable wrapping using the wrap prop, like this:

<Flow space="lg" direction="horizontal" wrap>
	<p>This content flows horizontally.</p>
	<p>It will wrap if the space available gets too small.</p>
</Flow>

Element

By default, the Flow component will render a <div> element. You can change this using the as prop, like this:

<Flow as="article"></Flow>