-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
App.svelte
90 lines (81 loc) · 2.31 KB
/
App.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script>
import { onMount } from "svelte";
import { open } from "@tauri-apps/api/window"
import Cli from './components/Cli.svelte'
import Communication from './components/Communication.svelte'
import Dialog from './components/Dialog.svelte'
import FileSystem from './components/FileSystem.svelte'
import Http from './components/Http.svelte'
import Notifications from './components/Notifications.svelte'
import Window from './components/Window.svelte'
import Shortcuts from './components/Shortcuts.svelte'
const views = [{
label: 'Messages',
component: Communication
}, {
label: 'CLI',
component: Cli
}, {
label: 'Dialog',
component: Dialog
}, {
label: 'File system',
component: FileSystem
}, {
label: 'HTTP',
component: Http
}, {
label: 'Notifications',
component: Notifications
}, {
label: 'Window',
component: Window
}, {
label: 'Shortcuts',
component: Shortcuts
}]
let selected = views[0].label;
let response = '';
function select(view) {
selected = view.label
}
function onMessage(value) {
response = typeof value === "string" ? value : JSON.stringify(value);
}
function onLogoClick() {
open("https://tauri.studio/");
}
</script>
<main>
<div class="logo-container">
<img src="icon.png" class="logo" on:click={onLogoClick} alt="logo" />
</div>
<div class="tabs-container">
<div class="tabs">
{#each views as view}
<div class="tab">
<input id={`tab-${view.label}`} type="radio" checked={view.label===selected} />
<label for={`tab-${view.label}`} class="tabber" on:click={()=> select(view)}>{view.label}</label>
<div class="content">
<svelte:component this={view.component} {onMessage} />
</div>
</div>
{/each}
</div>
</div>
<div id="response">{@html response}</div>
<div class="bottom">
<a class="dark-link" target="_blank" href="https://tauri.studio">
Tauri Documentation
</a>
<a class="dark-link" target="_blank" href="https://github.com/tauri-apps/tauri">
Github Repo
</a>
<a class="dark-link" target="_blank"
href="https://github.com/tauri-apps/tauri/tree/dev/tauri/examples/communication">
Source for this App
</a>
</div>
</main>