Terminal

1<script lang="ts">
2	import { onMount, setContext } from "svelte";
3	import { cn } from "$UTILS$";
4	import type { Snippet } from "svelte";
5	import { watch } from "runed";
6 
7	interface TerminalProps {
8		children: Snippet;
9		class?: string;
10		sequence?: boolean;
11		startOnView?: boolean;
12	}
13 
14	let {
15		children,
16		class: className,
17		sequence = true,
18		startOnView = true,
19	}: TerminalProps = $props();
20 
21	let containerRef: HTMLDivElement | null = $state(null);
22	let isInView = $state(false);
23	let activeIndex = $state(0);
24 
25	const sequenceHasStarted = $derived(sequence ? !startOnView || isInView : false);
26 
27	// Set context for child components - always set it, check sequence inside
28	let useSequence = $derived(sequence);
29	watch(
30		() => useSequence,
31		() => {
32			// setContext("terminal-sequence", val);
33			setContext(
34				"terminal-sequence",
35				useSequence
36					? {
37							get activeIndex() {
38								return activeIndex;
39							},
40							get sequenceStarted() {
41								return sequenceHasStarted;
42							},
43							completeItem: (index: number) => {
44								if (index === activeIndex) {
45									activeIndex = activeIndex + 1;
46								}
47							},
48						}
49					: null
50			);
51		}
52	);
53 
54	onMount(() => {
55		if (!startOnView || !sequence) {
56			isInView = true;
57			return;
58		}
59 
60		if (!containerRef) return;
61 
62		const observer = new IntersectionObserver(
63			([entry]) => {
64				if (entry.isIntersecting) {
65					isInView = true;
66					observer.disconnect();
67				}
68			},
69			{
70				threshold: 0.3,
71			}
72		);
73 
74		observer.observe(containerRef);
75 
76		return () => observer.disconnect();
77	});
78</script>
79 
80<div
81	bind:this={containerRef}
82	class={cn(
83		"border-border bg-background z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border",
84		className
85	)}
86>
87	<div class="border-border flex flex-col gap-y-2 border-b p-4">
88		<div class="flex flex-row gap-x-2">
89			<div class="h-2 w-2 rounded-full bg-red-500"></div>
90			<div class="h-2 w-2 rounded-full bg-yellow-500"></div>
91			<div class="h-2 w-2 rounded-full bg-green-500"></div>
92		</div>
93	</div>
94	<pre class="p-4">
95    <code class="grid gap-y-1 overflow-auto">{@render children()}</code>
96  </pre>
97</div>