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,79 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { getButtonStyle } from './utils';
+	import type { TerminalLine } from './types';
+
+	export let line: TerminalLine;
+	export let index: number;
+	export let selected: boolean;
+	export let onClick: (idx: number) => void;
+	export let onHover: (idx: number) => void;
+
+	// Determine if this is an external link
+	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
+</script>
+
+<button
+	class="tui-button"
+	class:selected={selected}
+	style="--btn-color: {getButtonStyle(line.style)}"
+	on:click={() => onClick(index)}
+	on:mouseenter={() => onHover(index)}
+>
+	<span class="btn-indicator">{selected ? '▶' : ' '}</span>
+	{#if line.icon}
+		<Icon icon={line.icon} width="16" />
+	{/if}
+	<span class="btn-text">{line.content}</span>
+	{#if line.href}
+		{#if isExternal}
+			<Icon icon="mdi:open-in-new" width="14" class="btn-arrow" />
+		{:else}
+			<Icon icon="mdi:chevron-right" width="16" class="btn-arrow" />
+		{/if}
+	{/if}
+</button>
+
+<style>
+	.tui-button {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		margin: 0.2rem 0;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: 4px;
+		color: var(--btn-color);
+		font-family: inherit;
+		font-size: 0.9rem;
+		text-align: left;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.tui-button:hover,
+	.tui-button.selected {
+		background: color-mix(in srgb, var(--btn-color) 15%, transparent);
+		border-color: var(--btn-color);
+	}
+
+	.btn-indicator {
+		color: var(--btn-color);
+		font-size: 0.8rem;
+		width: 1rem;
+	}
+
+	.btn-text {
+		flex: 1;
+	}
+
+	:global(.btn-arrow) {
+		opacity: 0.5;
+	}
+
+	.tui-button.selected :global(.btn-arrow) {
+		opacity: 1;
+	}
+</style>