web/src/lib/components/TabBar.svelte 943 B raw
1
<script>
2
  export let activeTab = 'capture';
3
4
  const tabs = [
5
    { id: 'capture', label: 'capture' },
6
    { id: 'profile', label: 'profile' },
7
    { id: 'compare', label: 'compare' },
8
    { id: 'humanness', label: 'human-ness' },
9
  ];
10
</script>
11
12
<nav class="tab-bar">
13
  {#each tabs as tab}
14
    <button
15
      class="tab"
16
      class:active={activeTab === tab.id}
17
      on:click={() => (activeTab = tab.id)}
18
    >
19
      {tab.label}
20
    </button>
21
  {/each}
22
</nav>
23
24
<style>
25
  .tab-bar {
26
    display: flex;
27
    gap: 0;
28
    border: 1px solid #333;
29
  }
30
31
  .tab {
32
    flex: 1;
33
    padding: 0.5rem 1rem;
34
    font-size: 12px;
35
    letter-spacing: 0.05em;
36
    border: none;
37
    border-right: 1px solid #333;
38
    background: transparent;
39
    color: #888;
40
    cursor: pointer;
41
  }
42
43
  .tab:last-child {
44
    border-right: none;
45
  }
46
47
  .tab:hover {
48
    color: #fff;
49
    opacity: 1;
50
  }
51
52
  .tab.active {
53
    color: #fff;
54
    background: #1a1a1a;
55
  }
56
</style>