71 lines
1.9 KiB
Svelte
71 lines
1.9 KiB
Svelte
<script lang="ts">
|
||
import TerminalCursor from '$lib/home/framework/ui/TerminalCursor.svelte';
|
||
import { onDestroy, onMount } from 'svelte';
|
||
|
||
let { text, onComplete: onCompleted }: { text: string; onComplete: () => void } = $props();
|
||
|
||
let timeText: string = $state('');
|
||
let showingText: string = $state('');
|
||
|
||
let textUpdateInterval: ReturnType<typeof setInterval> | null = null;
|
||
let timeUpdateInterval: ReturnType<typeof setInterval> | null = null;
|
||
|
||
onMount(() => {
|
||
setTimeout(() => {
|
||
textUpdateInterval = setInterval(() => {
|
||
if (showingText.length < text.length) {
|
||
showingText += text[showingText.length];
|
||
} else {
|
||
clearInterval(textUpdateInterval!);
|
||
setTimeout(onCompleted, 300);
|
||
}
|
||
}, 50);
|
||
}, 300);
|
||
|
||
timeText = dateToLocaleString(new Date());
|
||
timeUpdateInterval = setInterval(() => {
|
||
timeText = dateToLocaleString(new Date());
|
||
}, 1000);
|
||
});
|
||
|
||
onDestroy(() => {
|
||
if (textUpdateInterval != null) {
|
||
clearInterval(textUpdateInterval);
|
||
textUpdateInterval = null;
|
||
}
|
||
if (timeUpdateInterval != null) {
|
||
clearInterval(timeUpdateInterval);
|
||
timeUpdateInterval = null;
|
||
}
|
||
});
|
||
|
||
function dateToLocaleString(date: Date): string {
|
||
return date.toLocaleString('en-US', {
|
||
hour12: false,
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<div class="flex w-full flex-col pt-1.5 leading-5 md:pt-2.5 md:leading-7">
|
||
<div class="flex w-full flex-row flex-nowrap items-center gap-x-1.5 text-nowrap md:gap-x-2">
|
||
<span>
|
||
<span>╭─ squid </span>
|
||
<span class="text-blue-500">
|
||
~<span class="max-md:hidden">/Documents/blog</span>
|
||
</span>
|
||
</span>
|
||
<div class="h-0.5 w-full bg-gray-50"></div>
|
||
<span> {timeText}</span>
|
||
</div>
|
||
<div class="flex w-full flex-row gap-x-1.5 md:gap-x-2">
|
||
<span>
|
||
╰─<span class="text-green-400">❯</span>
|
||
</span>
|
||
<span>{showingText}</span>
|
||
<TerminalCursor />
|
||
</div>
|
||
</div>
|