Collapse

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

<Collapse summary="Build logs">
	<pre class="tcp-code"><code>$ npm run build
> tcpsystems/ui@1.0.0 build
> vite build

✓ 247 modules transformed
✓ built in 2.34s
dist/index.html                   0.89 kB
dist/assets/index-Cx9vK2.js      42.1 kB
dist/assets/index-Bz7mL1.css      8.2 kB</code></pre>
</Collapse>

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

<Collapse summary="Environment variables" open>
	<dl class="tcp-dl">
		<dt>NODE_ENV</dt>
		<dd>production</dd>
		<dt>DATABASE_URL</dt>
		<dd>postgresql://user:pass@db-host:5432/app</dd>
		<dt>REDIS_URL</dt>
		<dd>redis://redis-host:6379</dd>
		<dt>SENTRY_DSN</dt>
		<dd>https://key@sentry.io/123456</dd>
	</dl>
</Collapse>

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

<Collapse
	summary="Show advanced options"
>
	<fieldset class="tcp-fieldset">
		<legend>Build configuration</legend>
		<div class="tcp-field">
			<label for="build-cmd">Build command</label>
			<input id="build-cmd" type="text" value="npm run build" class="tcp-input" />
		</div>
		<div class="tcp-field">
			<label for="output-dir">Output directory</label>
			<input id="output-dir" type="text" value="dist" class="tcp-input" />
		</div>
		<div class="tcp-field">
			<label for="install-cmd">Install command</label>
			<input id="install-cmd" type="text" value="npm ci" class="tcp-input" />
		</div>
	</fieldset>
</Collapse>