DiffViewer

<script lang="ts">
	import DiffViewer from '@tcpsystems/ui/foundation/DiffViewer';
	const lines = [
		{ kind: 'context', text: 'listen = ":8080"', oldLine: 1, newLine: 1 },
		{ kind: 'removed', text: 'log_level = "debug"', oldLine: 2 },
		{ kind: 'added', text: 'log_level = "info"', newLine: 2 },
		{ kind: 'added', text: 'timeout = "30s"', newLine: 3 },
		{ kind: 'context', text: 'region = "eu-central"', oldLine: 3, newLine: 4 }
	] as const;
</script>

<DiffViewer lines={[...lines]} label="studio.toml changes" />

<script lang="ts">
	import DiffViewer from '@tcpsystems/ui/foundation/DiffViewer';
	const lines = [
		{ kind: 'context', text: 'func Handle(w http.ResponseWriter, r *http.Request) {', oldLine: 10, newLine: 10 },
		{ kind: 'removed', text: '\tw.WriteHeader(200)', oldLine: 11 },
		{ kind: 'added', text: '\tw.WriteHeader(http.StatusOK)', newLine: 11 },
		{ kind: 'context', text: '}', oldLine: 12, newLine: 12 }
	] as const;
</script>

<DiffViewer lines={[...lines]} layout="split" label="handler.go changes" />

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

<DiffViewer lines={[]} label="Config changes" emptyLabel="No changes since the last deploy" />

<script lang="ts">
	import DiffViewer from '@tcpsystems/ui/foundation/DiffViewer';
	import Button from '@tcpsystems/ui/foundation/Button';
	let layout = $state<'unified' | 'split'>('unified');
	const lines = [
		{ kind: 'removed', text: 'replicas = 2', oldLine: 4 },
		{ kind: 'added', text: 'replicas = 3', newLine: 4 },
		{ kind: 'context', text: 'memory = "512MB"', oldLine: 5, newLine: 5 }
	] as const;
</script>

<Button onclick={() => (layout = layout === 'unified' ? 'split' : 'unified')}>Show {layout === 'unified' ? 'split' : 'unified'}</Button>
<DiffViewer lines={[...lines]} {layout} label="Job spec changes" />