Tabs

<script lang="ts">
	import Tabs from '@tcpsystems/ui/foundation/Tabs';
	import Text from '@tcpsystems/ui/foundation/Text';
	const items = [
		{ id: 'deploy', label: 'Deploy' },
		{ id: 'logs', label: 'Logs' },
		{ id: 'config', label: 'Config' }
	];
</script>

<Tabs {items} label="Deployment 4127">
	{#snippet panel(item)}
		{#if item.id === 'deploy'}
			<Text>Deployment 4127 shipped search-gateway 2.4 to 3 regions.</Text>
		{:else if item.id === 'logs'}
			<Text mono>build 41s · push 12s · roll out 38s — no errors</Text>
		{:else}
			<Text>4 replicas, autoscale off, canary at 10%.</Text>
		{/if}
	{/snippet}
</Tabs>

<script lang="ts">
	import Tabs from '@tcpsystems/ui/foundation/Tabs';
</script>

<Tabs label="Invoices" items={[
	{ id: 'october', label: 'October', href: '#october' },
	{ id: 'september', label: 'September', href: '#september', current: true },
	{ id: 'august', label: 'August', href: '#august' }
]} />

<script lang="ts">
	import Tabs from '@tcpsystems/ui/foundation/Tabs';
	import Text from '@tcpsystems/ui/foundation/Text';
	const items = [
		{ id: 'open', label: 'Open', count: '7' },
		{ id: 'paid', label: 'Paid', count: '31' },
		{ id: 'overdue', label: 'Overdue' },
		{ id: 'archived', label: 'Archived', disabled: true }
	];
</script>

<Tabs {items} label="Invoices">
	{#snippet panel(item)}
		{#if item.id === 'open'}
			<Text>7 invoices awaiting payment, 2 sent this week.</Text>
		{:else if item.id === 'paid'}
			<Text>31 paid this quarter, first payment on file since March.</Text>
		{:else}
			<Text>No overdue invoices.</Text>
		{/if}
	{/snippet}
</Tabs>