From f88f568f7e7c82f2b5ec2b02585bc636e1b3bb5e Mon Sep 17 00:00:00 2001
From: Alessandro Pignotti <a.pignotti@sssup.it>
Date: Sun, 13 Oct 2024 22:30:57 +0200
Subject: [PATCH] Svelte: Extract NetworkingTab button into a reusable
 component

---
 src/lib/NetworkingTab.svelte |  3 ++-
 src/lib/PanelButton.svelte   | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/PanelButton.svelte

diff --git a/src/lib/NetworkingTab.svelte b/src/lib/NetworkingTab.svelte
index e431695..c8051c3 100644
--- a/src/lib/NetworkingTab.svelte
+++ b/src/lib/NetworkingTab.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { networkData, startLogin } from '$lib/network.js'
 	import { createEventDispatcher } from 'svelte';
+	import PanelButton from './PanelButton.svelte';
 	var dispatch = createEventDispatcher();
 	var connectionState = networkData.connectionState;
 	function handleConnect() {
@@ -97,6 +98,6 @@
 	}
 </script>
 <h1 class="text-lg font-bold">Networking</h1>
-<a href={getClickUrl($connectionState)} target="_blank" on:click={getClickHandler($connectionState)} on:contextmenu={getRightClickHandler($connectionState)}><p class="bg-neutral-700 p-2 rounded-md {isClickableState($connectionState) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={getButtonTooltip($connectionState)}><img src="assets/tailscale.svg" class="inline w-8"/><span class="ml-1">{getButtonText($connectionState)}</span></p></a>
+<PanelButton buttonIcon="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}/>
 <p>WebVM can connect to the Internet via Tailscale</p>
 <p>Using Tailscale is required since browser do not support TCP/UDP sockets (yet!)</p>
diff --git a/src/lib/PanelButton.svelte b/src/lib/PanelButton.svelte
new file mode 100644
index 0000000..0c8a1e8
--- /dev/null
+++ b/src/lib/PanelButton.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let clickUrl = null;
+	export let clickHandler = null;
+	export let rightClickHandler = null;
+	export let buttonTooltip = null;
+	export let buttonText;
+	export let buttonIcon;
+</script>
+
+<a href={clickUrl} target="_blank" on:click={clickHandler} on:contextmenu={rightClickHandler}><p class="bg-neutral-700 p-2 rounded-md {(clickUrl != null || clickHandler != null) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={buttonTooltip}><img src={buttonIcon} class="inline w-8"/><span class="ml-1">{buttonText}</span></p></a>