Panel

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

<Panel
	title="Server configuration"
>
	{#snippet actions()}
		<Cluster>
			<Button variant="ghost" size="sm" icon="edit">Edit</Button>
			<Button variant="ghost" size="sm" icon="copy">Duplicate</Button>
		</Cluster>
	{/snippet}

	<dl class="tcp-dl">
		<dt>Region</dt>
		<dd>us-east-1</dd>
		<dt>Instance type</dt>
		<dd>t3.medium</dd>
		<dt>Storage</dt>
		<dd>100 GB SSD</dd>
		<dt>Backup window</dt>
		<dd>03:00–04:00 UTC</dd>
	</dl>
</Panel>

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

<Panel>
	<p>Use Panel without a title when you just need a bordered container with padding.</p>
</Panel>

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

<Panel title="Project settings">
	<Section title="General" lead="Basic project information">
		<p>Project name: <strong>tcpsystems/ui</strong></p>
		<p>Repository: <code>github.com/tcpsystems/ui</code></p>
	</Section>
	<Section title="Build" lead="Build configuration">
		<p>Framework: SvelteKit</p>
		<p>Node version: 20.x</p>
	</Section>
</Panel>