1  import { html } from "uhtml/reactive"
 2  import { ActivityView } from "./activity.template.mjs"
 3  import { SamplesView } from "./samples.template.mjs"
 4  import { LeadsView } from "./leads.template.mjs"
 5  
 6  const ACTIVITY_TAB = "Activity"
 7  const LEADS_TAB = "Leads"
 8  const SAMPLES_TAB = "Samples"
 9  const HEALTH_TAB = "Health"
10  const ERRORS_TAB = "Errors"
11  const ANALYTICS_TAB = "Analytics"
12  
13  
14  
15  const ALL_TABS = [ ACTIVITY_TAB, SAMPLES_TAB ]
16  
17  const   HealthView = (state) => html`<div>This is the Health View</div>`
18  ,       ErrorsView = (state) => html`<div>This is the Errors View</div>`
19  ,    AnalyticsView = (state) => html`<div>This is the Analytics View</div>`
20  
21  const supportViews = new Map([
22    [ACTIVITY_TAB, ActivityView],
23    [SAMPLES_TAB, SamplesView],
24    [LEADS_TAB, LeadsView],
25    [HEALTH_TAB, HealthView],
26    [ERRORS_TAB, ErrorsView],
27    [ANALYTICS_TAB, AnalyticsView], 
28  ])
29  
30  export const SupportApp = (state) => {
31    let { selectedTab } = state
32    let tabView = supportViews.get(selectedTab.value)
33  
34    const changeTab = (tab) => { state.selectedTab.value = tab }
35  
36    const SupportNavOption = (self, active) => {
37      const tabClass = self == active ? "support-nav-option support-nav-selected" : "support-nav-option"
38      return html`<span onclick=${ (e) => { changeTab(self) } } class=${tabClass}>${self}</span>`
39    } 
40  
41    return html`
42      <div class="support">
43        <nav class="support-nav">
44          ${ALL_TABS.map((tab) => SupportNavOption(tab, selectedTab.value))}
45        </nav>
46        <section class="support-view"> 
47        ${tabView(state)}
48        </section>
49      </div>`
50  }