68 lines
3.0 KiB
Svelte
68 lines
3.0 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte';
|
|
import StatsTab from './StatsTab.svelte';
|
|
import WatchlistTab from './WatchlistTab.svelte';
|
|
import LogTab from './LogTab.svelte';
|
|
|
|
export let activeTab;
|
|
export let topSpotters;
|
|
export let spots;
|
|
export let watchlist;
|
|
export let recentQSOs;
|
|
export let logStats;
|
|
export let dxccProgress;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
</script>
|
|
|
|
<div class="bg-slate-800/50 backdrop-blur rounded-lg border border-slate-700/50 flex flex-col overflow-hidden h-full">
|
|
<!-- Tabs Header -->
|
|
<div class="flex border-b border-slate-700/50 bg-slate-900/30 flex-shrink-0">
|
|
<button
|
|
class="px-4 py-2 text-sm font-semibold transition-colors {activeTab === 'stats' ? 'bg-blue-500/20 text-blue-400 border-b-2 border-blue-500' : 'text-slate-400 hover:text-slate-300'}"
|
|
on:click={() => activeTab = 'stats'}>
|
|
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
Stats
|
|
</button>
|
|
|
|
<button
|
|
class="px-4 py-2 text-sm font-semibold transition-colors {activeTab === 'watchlist' ? 'bg-blue-500/20 text-blue-400 border-b-2 border-blue-500' : 'text-slate-400 hover:text-slate-300'}"
|
|
on:click={() => activeTab = 'watchlist'}>
|
|
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
Watchlist
|
|
</button>
|
|
|
|
<button
|
|
class="px-4 py-2 text-sm font-semibold transition-colors {activeTab === 'log' ? 'bg-blue-500/20 text-blue-400 border-b-2 border-blue-500' : 'text-slate-400 hover:text-slate-300'}"
|
|
on:click={() => activeTab = 'log'}>
|
|
<svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Log
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="flex-1 overflow-hidden">
|
|
{#if activeTab === 'stats'}
|
|
<StatsTab {topSpotters} {spots} />
|
|
{:else if activeTab === 'watchlist'}
|
|
<WatchlistTab
|
|
{watchlist}
|
|
{spots}
|
|
on:toast={(e) => dispatch('toast', e.detail)}
|
|
/>
|
|
{:else if activeTab === 'log'}
|
|
<LogTab
|
|
{recentQSOs}
|
|
{logStats}
|
|
{dxccProgress}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</div> |