Section

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

<Section
	title="Team members"
	lead="Manage access and roles for your organization"
	id="team"
>
	<Panel title="Engineering" id="eng-panel">
		<ul class="tcp-list">
			<li>Alex Chen — Platform Lead</li>
			<li>Samira Patel — Backend Engineer</li>
			<li>Jordan Kim — Frontend Engineer</li>
		</ul>
	</Panel>
	<Panel title="Product" id="product-panel">
		<ul class="tcp-list">
			<li>Morgan Lee — Product Manager</li>
			<li>Casey Rivera — Designer</li>
		</ul>
	</Panel>
</Section>

<script lang="ts">
	import Section from '@tcpsystems/ui/foundation/Section';
	import Panel from '@tcpsystems/ui/foundation/Panel';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Section
	title="Recent deployments"
	lead="Last 10 deployments across all environments"
	id="deployments"
>
			<Cluster>
			<Button variant="ghost" icon="refresh" size="sm">Refresh</Button>
			<Button variant="ghost" href="/deployments" size="sm">View all</Button>
		</Cluster>
	<Panel>
		<ul class="tcp-list">
			<li>prod — v2.4.1 — 2 min ago — Success</li>
			<li>staging — v2.4.1-rc.3 — 15 min ago — Success</li>
			<li>prod — v2.4.0 — 2 days ago — Success</li>
		</ul>
	</Panel>
</Section>

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

<Section id="notes">
	<p>This section has no title or lead — just content.</p>
</Section>