Skip to content

Commit a51f6d0

Browse files
authored
feat: add active class to examples menu (#7)
1 parent 85dc171 commit a51f6d0

File tree

2 files changed

+20
-3
lines changed

2 files changed

+20
-3
lines changed

src/components/App.svelte

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script lang="ts">
22
import { compile, jsonquery, parse, stringify } from '@jsonquerylang/jsonquery'
3+
import { isTextFormat } from './typeguards';
34
import Button from './Button.svelte'
45
import Playground from './Playground.svelte'
5-
import { examples } from './data/examples'
6+
import { examples, type Example } from './data/examples'
67
import { loadLocalStorage, saveLocalStorage } from './runes/localStorageState.svelte'
78
import type { QueryText } from './types'
89
@@ -15,6 +16,7 @@ const keyInput = 'playground-input'
1516
const keyQuery = 'playground-query'
1617
const keyQueryTab = 'playground-query-tab'
1718
19+
let name = $state(examples[0].name)
1820
let input = $state(loadLocalStorage(keyInput, examples[0].input))
1921
// biome-ignore lint/style/useConst: must be let for Svelte
2022
let queryTab: 'text' | 'json' = $state(loadLocalStorage(keyQueryTab, 'text'))
@@ -24,19 +26,30 @@ $effect(() => saveLocalStorage(keyInput, input))
2426
$effect(() => saveLocalStorage(keyQuery, query))
2527
$effect(() => saveLocalStorage(keyQueryTab, queryTab))
2628
27-
function loadExample(example: { input: string; query: string }) {
29+
function loadExample(example: Example) {
2830
input = example.input
2931
query = { textFormat: example.query }
32+
name = example.name
3033
}
34+
35+
const activeExample = $derived(
36+
examples.find(
37+
(example) =>
38+
example.input === input &&
39+
isTextFormat(query) &&
40+
example.query === query.textFormat
41+
)
42+
);
3143
</script>
3244

3345
<div class="examples">
3446
<div class="examples-inner">
3547
{#each examples as example}
36-
<Button class="example" onclick={() => loadExample(example)}>{example.name}</Button>
48+
<Button class="example {activeExample === example ? 'active' : ''}" onclick={() => loadExample(example)}>{example.name}</Button>
3749
{/each}
3850
</div>
3951
</div>
52+
4053
<Playground bind:input bind:query bind:queryTab />
4154

4255
<style>

src/components/Button.svelte

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@ const props = $props()
1919
button:hover {
2020
background: #9c9c9c;
2121
}
22+
23+
button.active {
24+
background: var(--color);
25+
}
2226
</style>

0 commit comments

Comments
 (0)