Website Redesign 7

src/lib/components/tui/TuiProgress.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { getButtonStyle } from './utils';
+	import type { TerminalLine } from './types';
+
+	export let line: TerminalLine;
+
+	$: progress = Math.min(100, Math.max(0, line.progress ?? 0));
+	$: label = line.progressLabel || `${progress}%`;
+</script>
+
+<div class="tui-progress" style="--progress-color: {getButtonStyle(line.style)}">
+	{#if line.content}
+		<div class="progress-label">{line.content}</div>
+	{/if}
+	<div class="progress-bar">
+		<div class="progress-fill" style="width: {progress}%">
+			<span class="progress-glow"></span>
+		</div>
+		<div class="progress-blocks">
+			{#each Array(20) as _, i}
+				<span class="block" class:filled={i < Math.floor(progress / 5)}></span>
+			{/each}
+		</div>
+	</div>
+	<div class="progress-value">{label}</div>
+</div>
+
+<style>
+	.tui-progress {
+		margin: 0.5rem 0;
+		font-size: 0.85rem;
+	}
+
+	.progress-label {
+		color: var(--terminal-text);
+		margin-bottom: 0.25rem;
+	}
+
+	.progress-bar {
+		position: relative;
+		height: 1.2rem;
+		background: var(--terminal-border);
+		border-radius: 3px;
+		overflow: hidden;
+	}
+
+	.progress-fill {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background: linear-gradient(90deg, var(--progress-color), color-mix(in srgb, var(--progress-color) 80%, white 20%));
+		border-radius: 3px;
+		transition: width 0.3s ease;
+	}
+
+	.progress-glow {
+		position: absolute;
+		right: 0;
+		top: 0;
+		height: 100%;
+		width: 20px;
+		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
+		animation: shimmer 1.5s infinite;
+	}
+
+	@keyframes shimmer {
+		0% { opacity: 0; }
+		50% { opacity: 1; }
+		100% { opacity: 0; }
+	}
+
+	.progress-blocks {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		gap: 2px;
+		padding: 3px;
+	}
+
+	.block {
+		flex: 1;
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 1px;
+		transition: background 0.2s;
+	}
+
+	.block.filled {
+		background: transparent;
+	}
+
+	.progress-value {
+		text-align: right;
+		color: var(--progress-color);
+		font-size: 0.75rem;
+		margin-top: 0.25rem;
+		font-weight: 600;
+	}
+</style>