Tree

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

<Stack>
	<Tree label="Gateway files" items={[
		{ id: `${uid}-gateway`, label: 'Gateway', children: [
			{ id: `${uid}-config`, label: 'Configuration', href: `#${uid}-config`, current: true },
			{ id: `${uid}-releases`, label: 'Releases', expanded: false, children: [
				{ id: `${uid}-stable`, label: 'Stable release', href: `#${uid}-stable` }
			] }
		] }
	]} />
	<p id={`${uid}-config`}>Configuration: three production replicas.</p>
	<p id={`${uid}-stable`}>Stable release: gateway v2.4.</p>
</Stack>

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

<Stack>
	<Tree label="Archived services" aria-disabled="true" items={[{ id: `${uid}-archive`, label: 'Legacy proxy', href: `#${uid}-archive` }]} />
	<p id={`${uid}-archive`}>Archived services are read only.</p>
</Stack>

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

<Stack>
	<Tree label="Project files" items={[]} />
	<p>No files yet. Connect a repository to browse its files.</p>
</Stack>