Website Redesign 7

2025-11-28 02:40:12 +00:00
parent 9b9a201c3e
commit 96e2d0650c
72 changed files with 7504 additions and 1231 deletions
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
+	import type { TerminalLine } from './types';
+
+	export let line: TerminalLine;
+
+	$: headers = line.tableHeaders || [];
+	$: rows = line.tableRows || [];
+</script>
+
+<div class="tui-table-wrapper" style="--table-accent: {getButtonStyle(line.style)}">
+	{#if line.content}
+		<div class="table-title">{line.content}</div>
+	{/if}
+	<table class="tui-table">
+		{#if headers.length > 0}
+			<thead>
+				<tr>
+					{#each headers as header}
+						<th>{header}</th>
+					{/each}
+				</tr>
+			</thead>
+		{/if}
+		<tbody>
+			{#each rows as row, i}
+				<tr class:alt={i % 2 === 1}>
+					{#each row as cell}
+						{@const cellSegments = parseColorText(cell)}
+						<td>
+							{#each cellSegments as segment}
+								{#if getSegmentStyle(segment)}
+									<span style={getSegmentStyle(segment)}>{segment.text}</span>
+								{:else}
+									{segment.text}
+								{/if}
+							{/each}
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.tui-table-wrapper {
+		margin: 0.5rem 0;
+		border: 1px solid var(--terminal-border);
+		border-radius: 6px;
+		overflow: hidden;
+	}
+
+	.table-title {
+		padding: 0.5rem 0.75rem;
+		font-weight: 600;
+		font-size: 0.85rem;
+		color: var(--terminal-text);
+		background: rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid var(--terminal-border);
+	}
+
+	.tui-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.8rem;
+	}
+
+	th {
+		padding: 0.5rem 0.75rem;
+		text-align: left;
+		font-weight: 600;
+		color: var(--table-accent);
+		background: rgba(0, 0, 0, 0.15);
+		border-bottom: 1px solid var(--terminal-border);
+		white-space: nowrap;
+	}
+
+	td {
+		padding: 0.4rem 0.75rem;
+		color: var(--terminal-text);
+		border-bottom: 1px solid var(--terminal-border);
+	}
+
+	tr:last-child td {
+		border-bottom: none;
+	}
+
+	tr.alt {
+		background: rgba(0, 0, 0, 0.03);
+	}
+
+	tr:hover {
+		background: color-mix(in srgb, var(--table-accent) 5%, transparent);
+	}
+</style>