Svelte: Prototype Discord tab

src/lib/DiscordTab.svelte

@@ -0,0 +1,8 @@
+<script>
+	import PanelButton from './PanelButton.svelte';
+</script>
+
+<h1 class="text-lg font-bold">Discord</h1>
+<PanelButton buttonIcon="assets/discord-mark-blue.svg" clickUrl="https://discord.gg/yTNZgySKGa" buttonText="Join us on Discord"/>
+<p>Do you have any question about WebVM or CheerpX?</p>
+<p>Join our community, we are happy to help!</p>

src/lib/PanelButton.svelte

@@ -7,4 +7,4 @@
 	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>
+<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 h-8"/><span class="ml-1">{buttonText}</span></p></a>

src/lib/SideBar.svelte

@@ -3,6 +3,7 @@
 	import NetworkingTab from './NetworkingTab.svelte';
 	import CpuTab from './CpuTab.svelte';
 	import DiskTab from './DiskTab.svelte';
+	import DiscordTab from './DiscordTab.svelte';
 	import { cpuActivity, diskActivity } from './activities.js'
 
 	const icons = [
@@ -48,6 +49,8 @@
 			<CpuTab/>
 		{:else if activeInfo === 'Disk'}
 			<DiskTab/>
+		{:else if activeInfo === 'Discord'}
+			<DiscordTab/>
 		{:else}
 			<p>{activeInfo}</p>
 		{/if}