ScrollArea

<script lang="ts">
	import ScrollArea from '@tcpsystems/ui/foundation/ScrollArea';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Text from '@tcpsystems/ui/foundation/Text';
	const lines = ['Pulling api-gateway:2.14.0', 'Running migrations', 'Starting instance 1 of 3', 'Health check passed', 'Starting instance 2 of 3', 'Health check passed', 'Starting instance 3 of 3', 'Health check passed', 'Deployment complete'];
</script>

<ScrollArea label="Deployment log" height="--tcp-space-16">
	<Stack gap="sm">
		{#each lines as line}
			<Text mono>{line}</Text>
		{/each}
	</Stack>
</ScrollArea>

<script lang="ts">
	import ScrollArea from '@tcpsystems/ui/foundation/ScrollArea';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Text from '@tcpsystems/ui/foundation/Text';
	const members = ['Maria Chen', 'Tomás Ruiz', 'Priya Nair', 'Jonas Weber', 'Aiko Tanaka', 'Samuel Okafor', 'Lena Petrova'];
</script>

<ScrollArea label="Team members" height="--tcp-space-16">
	<Stack gap="sm">
		{#each members as name}
			<Text>{name}</Text>
		{/each}
	</Stack>
</ScrollArea>