|
1 | 1 | <script lang="ts"> |
2 | 2 | import { clsx } from 'clsx' |
3 | | - import { writable } from "svelte/store" |
4 | 3 |
|
5 | 4 | export let workshopHtml: string |
6 | 5 | export let conferenceHtml: string |
7 | 6 |
|
8 | | - let modeValue: string |
9 | | - export const switchMode = writable(typeof window !== 'undefined' && localStorage.getItem("jsbkk:switchMode") || "work") |
10 | | - switchMode.subscribe(value => { |
11 | | - modeValue = value |
12 | | - if (typeof window !== 'undefined') |
13 | | - localStorage.setItem("jsbkk:switchMode", value) |
14 | | - }) |
| 7 | + let isWorkshop = false |
15 | 8 | </script> |
16 | 9 |
|
17 | 10 | <div class="flex justify-center pb-8"> |
18 | 11 | <span class="isolate inline-flex rounded-md shadow-sm"> |
19 | 12 | <button |
20 | | - on:click={() => switchMode.set('work')} |
| 13 | + on:click={() => isWorkshop = true} |
21 | 14 | class={clsx( |
22 | | - modeValue === 'work' ? "bg-brand-orange hover:bg-orange-600 text-white" : "bg-white text-gray-900 hover:bg-gray-50", |
| 15 | + isWorkshop ? "bg-brand-orange hover:bg-orange-600 text-white" : "bg-white text-gray-900 hover:bg-gray-50", |
23 | 16 | "relative inline-flex items-center rounded-l-md px-4 py-2 text-lg font-semibold ring-1 ring-inset ring-gray-300 focus:z-10" |
24 | 17 | )}> |
25 | 18 | Day 1 |
26 | 19 | </button> |
27 | 20 | <button |
28 | | - on:click={() => switchMode.set('conf')} |
| 21 | + on:click={() => isWorkshop = false} |
29 | 22 | class={clsx( |
30 | | - modeValue === 'conf' ? "bg-brand-orange hover:bg-orange-600 text-white" : "bg-white text-gray-900 hover:bg-gray-50", |
| 23 | + !isWorkshop ? "bg-brand-orange hover:bg-orange-600 text-white" : "bg-white text-gray-900 hover:bg-gray-50", |
31 | 24 | "relative -ml-px inline-flex items-center rounded-r-md px-4 py-2 text-lg font-semibold ring-1 ring-inset ring-gray-300 focus:z-10" |
32 | 25 | )}> |
33 | 26 | Day 2 |
|
36 | 29 | </div> |
37 | 30 |
|
38 | 31 | <h1 class="font-bold text-3xl md:text-4xl"> |
39 | | - {#if modeValue === 'work'} |
| 32 | + {#if isWorkshop} |
40 | 33 | Workshop |
41 | 34 | {:else} |
42 | 35 | Conference |
43 | 36 | {/if} |
44 | 37 | </h1> |
45 | 38 | <h2 class="md:text-lg pb-8"> |
46 | | - {#if modeValue === 'work'} |
| 39 | + {#if isWorkshop} |
47 | 40 | (Fri) October 18, 2024 @Microsoft Thailand |
48 | 41 | {:else} |
49 | 42 | (Sat) October 19, 2024 @True Digital Park |
50 | 43 | {/if} |
51 | 44 | </h2> |
52 | 45 |
|
53 | | -{@html modeValue === 'work' ? workshopHtml : conferenceHtml} |
| 46 | +{@html isWorkshop ? workshopHtml : conferenceHtml} |
0 commit comments