Accordion

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

<Accordion
	items={[
		{ id: 'deploy', title: 'Deploy configuration', open: true },
		{ id: 'env', title: 'Environment variables' },
		{ id: 'domains', title: 'Custom domains' },
		{ id: 'ssl', title: 'SSL certificates' }
	]}
	name="deploy-faq"
>
	{#snippet panel(item)}
		{#if item.id === 'deploy'}
			<p>Configure your build command, output directory, and deploy triggers. Each push to the connected branch automatically starts a new deployment.</p>
		{:else if item.id === 'env'}
			<ul class="tcp-list">
				<li><code>NODE_ENV</code> — Set to <code>production</code> for production builds</li>
				<li><code>DATABASE_URL</code> — Your PostgreSQL connection string</li>
				<li><code>REDIS_URL</code> — Redis connection for caching and queues</li>
			</ul>
		{:else if item.id === 'domains'}
			<p>Add custom domains in the Domains tab. We automatically provision TLS certificates via Let's Encrypt. DNS validation required.</p>
		{:else if item.id === 'ssl'}
			<p>SSL certificates are automatically renewed 30 days before expiry. Wildcard certificates supported for apex domains.</p>
		{/if}
	{/snippet}
</Accordion>

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

<Accordion
	items={[
		{ id: 'getting-started', title: 'Getting started', open: true },
		{ id: 'auth', title: 'Authentication' },
		{ id: 'api', title: 'API reference' },
		{ id: 'deploy', title: 'Deployment' }
	]}
	name="docs-nav"
	headingLevel={2}
>
	{#snippet panel(item)}
		{#if item.id === 'getting-started'}
			<p>Welcome! Start by creating your first project. Click <strong>New project</strong> in the dashboard, connect your repository, and your first deploy will start automatically.</p>
		{:else if item.id === 'auth'}
			<p>We support GitHub, GitLab, and Bitbucket OAuth. Team members inherit repository permissions. SSO available on Enterprise plans.</p>
		{:else if item.id === 'api'}
			<p>REST API with OpenAPI 3.1 spec. Rate limited to 1,000 req/min. Webhooks for deploy events, build status, and domain changes.</p>
		{:else if item.id === 'deploy'}
			<p>Deployments are immutable. Rollback to any previous deployment instantly. Preview deployments for every pull request.</p>
		{/if}
	{/snippet}
</Accordion>

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

<Accordion
	items={[
		{ id: 'active', title: 'Active subscription', open: true },
		{ id: 'expired', title: 'Expired: Pro plan', disabled: true },
		{ id: 'cancelled', title: 'Cancelled: Team plan', disabled: true }
	]}
	name="billing-history"
>
	{#snippet panel(item)}
		{#if item.id === 'active'}
			<p>Current plan: <strong>Enterprise</strong> · $499/mo · Renews 1 Jan 2025</p>
		{:else if item.id === 'expired'}
			<p>This subscription expired on 15 Oct 2024. Reactivate to restore Pro features.</p>
		{:else if item.id === 'cancelled'}
			<p>Cancelled on 3 Sep 2024. Access continued until 3 Oct 2024.</p>
		{/if}
	{/snippet}
</Accordion>