Website Redesign 7

src/lib/components/tui/TuiLink.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { getButtonStyle } from './utils';
+	import type { TerminalLine } from './types';
+
+	export let line: TerminalLine;
+	export let onClick: () => void;
+
+	// Determine if this is an external link
+	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
+</script>
+
+<span class="tui-link" style="--link-color: {getButtonStyle(line.style)}">
+	{#if line.icon}
+		<Icon icon={line.icon} width="14" class="link-icon" />
+	{/if}
+	<button class="link-text" on:click={onClick}>
+		{line.content}
+	</button>
+	{#if isExternal}
+		<Icon icon="mdi:open-in-new" width="12" class="link-external" />
+	{/if}
+</span>
+
+<style>
+	.tui-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	:global(.link-icon) {
+		color: var(--link-color);
+		opacity: 0.8;
+	}
+
+	.link-text {
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font-family: inherit;
+		font-size: inherit;
+		color: var(--link-color);
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		text-underline-offset: 2px;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.link-text:hover {
+		text-decoration-style: solid;
+		filter: brightness(1.2);
+	}
+
+	:global(.link-external) {
+		color: var(--link-color);
+		opacity: 0.5;
+	}
+
+	.tui-link:hover :global(.link-external) {
+		opacity: 0.8;
+	}
+</style>