OverflowList

<script lang="ts">
	import OverflowList from '@tcpsystems/ui/foundation/OverflowList';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
</script>

<Stack>
	<OverflowList id={uid} label="Project sections" items={[{ label: 'Overview', href: `#${uid}-summary` }, { label: 'Deployments', href: `#${uid}-summary` }, { label: 'Logs', href: `#${uid}-summary` }]} />
	<p id={`${uid}-summary`}>Gateway deployment overview.</p>
</Stack>

<script lang="ts">
	import OverflowList from '@tcpsystems/ui/foundation/OverflowList';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
</script>

<Stack>
	<OverflowList id={uid} label="Project sections" moreLabel="More sections" items={[{ label: 'Overview', href: `#${uid}-summary` }, { label: 'Deployments', href: `#${uid}-summary` }, { label: 'Build history', href: `#${uid}-summary` }, { label: 'Runtime logs', href: `#${uid}-summary` }, { label: 'Model usage', href: `#${uid}-summary` }, { label: 'Access tokens', href: `#${uid}-summary` }, { label: 'Team members', href: `#${uid}-summary` }, { label: 'Billing settings', href: `#${uid}-summary` }, { label: 'Audit trail', href: `#${uid}-summary` }, { label: 'Webhooks', href: `#${uid}-summary` }]} />
	<p id={`${uid}-summary`}>Gateway: three healthy replicas. Resize the window to move links into the menu.</p>
</Stack>

<script lang="ts">
	import OverflowList from '@tcpsystems/ui/foundation/OverflowList';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
</script>

<Stack>
	<OverflowList id={uid} label="Project sections" aria-disabled="true" items={[{ label: 'Overview', href: `#${uid}-summary` }, { label: 'Deployments', href: `#${uid}-summary` }, { label: 'Build history', href: `#${uid}-summary` }, { label: 'Runtime logs', href: `#${uid}-summary` }, { label: 'Model usage', href: `#${uid}-summary` }, { label: 'Access tokens', href: `#${uid}-summary` }, { label: 'Team members', href: `#${uid}-summary` }, { label: 'Billing settings', href: `#${uid}-summary` }, { label: 'Audit trail', href: `#${uid}-summary` }, { label: 'Webhooks', href: `#${uid}-summary` }]} />
	<p id={`${uid}-summary`}>Gateway deployment overview.</p>
</Stack>

<script lang="ts">
	import OverflowList from '@tcpsystems/ui/foundation/OverflowList';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
</script>

<Stack>
	<OverflowList id={uid} label="Project sections" items={[]} />
	<p id={`${uid}-summary`}>No pinned sections. Pin a section to add it here.</p>
</Stack>