ScopeSwitcher

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

<Stack>
	<ScopeSwitcher id={uid} label="Project" current={{ name: 'Gateway' }} options={[
		{ name: 'Gateway', href: `#${uid}-gateway`, description: 'Production gateway' },
		{ name: 'Studio', href: `#${uid}-studio`, description: 'Owner workspace' }
	]} />
	<p id={`${uid}-gateway`}>Gateway workspace</p>
	<p id={`${uid}-studio`}>Studio workspace</p>
</Stack>

<script lang="ts">
	import ScopeSwitcher from '@tcpsystems/ui/foundation/ScopeSwitcher';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	const options = [
		{ name: 'Gateway', href: `#${uid}-gateway`, description: 'Production gateway' },
		{ name: 'Studio', href: `#${uid}-studio`, description: 'Owner workspace' },
		{ name: 'Search', href: `#${uid}-search`, description: 'Owner workspace' },
		{ name: 'Console', href: `#${uid}-console`, description: 'Owner workspace' },
		{ name: 'Radar', href: `#${uid}-radar`, description: 'Owner workspace' },
		{ name: 'Mailbox', href: `#${uid}-mailbox`, description: 'Owner workspace' },
		{ name: 'Status', href: `#${uid}-status`, description: 'Owner workspace' },
		{ name: 'Edge', href: `#${uid}-edge`, description: 'Owner workspace' }
	];
</script>

<Stack>
	<ScopeSwitcher id={uid} label="Project" current={{ name: 'Gateway' }} options={options} createHref={`#${uid}-create`} createLabel="Create project" />
	{#each options as option (option.href)}
		<p id={option.href.slice(1)}>{option.name} workspace</p>
	{/each}
	<p id={`${uid}-create`}>Create a project by connecting its repository in Studio.</p>
</Stack>

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

<Stack>
	<ScopeSwitcher id={uid} label="Project" current={{ name: 'Choose a project' }} options={[
		
	]} createHref={`#${uid}-create`} createLabel="Create project" />
	
	<p id={`${uid}-create`}>Create a project by connecting its repository in Studio.</p>
</Stack>