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

<PageHeader
	title="Deployments"
	lead="Manage and monitor your application deployments"
>
	{#snippet status()}
		<span class="tcp-badge tcp-badge--success">Live</span>
	{/snippet}
	{#snippet actions()}
		<Cluster>
			<Button variant="primary" icon="plus">New deployment</Button>
			<Button variant="ghost" href="/deployments/import">Import</Button>
		</Cluster>
	{/snippet}
</PageHeader>

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

<PageHeader title="Settings" />

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

<PageHeader
	title="Invoice #INV-2024-047"
	lead="Issued on 14 November 2024 · Due 14 December 2024"
>
	{#snippet status()}
		<span class="tcp-badge tcp-badge--warning">Pending</span>
	{/snippet}
	{#snippet actions()}
		<Button variant="primary" icon="download">Download PDF</Button>
	{/snippet}
</PageHeader>