Hugging Face's logo

Spaces:
Fraser
/
piclets
Running

App Files Community
piclets
File size: 2,375 Bytes 
6710512
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303b4b7
 
 
6710512
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9218f2c
 
6710512
 
 
 
 
 
 
 
06c6c65
6710512
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9218f2c
 
6710512
 
 
9218f2c
6710512
 
 
 
 
 
 
9218f2c
 
6710512
21965b1
6710512
 
 
6e3de95
21965b1
6710512
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<script lang="ts">
  export type TabId = 'scanner' | 'encounters' | 'pictuary';
  
  interface Tab {
    id: TabId;
    label: string;
    icon: string;
  }
  
  interface Props {
    activeTab: TabId;
    onTabChange: (tab: TabId) => void;
  }
  
  let { activeTab, onTabChange }: Props = $props();
  
  const tabs: Tab[] = [
    { id: 'scanner', label: 'Scanner', icon: 'https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/snap_logo.png' },
    { id: 'encounters', label: 'Encounters', icon: 'https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/encounters_logo.png' },
    { id: 'pictuary', label: 'Pictuary', icon: 'https://huggingface.co/spaces/Fraser/piclets/resolve/main/assets/pictuary_logo.png' }
  ];
  
  function handleTabClick(tabId: TabId) {
    onTabChange(tabId);
  }
</script>

<nav class="tab-bar">
  <div class="tab-bar-inner">
    {#each tabs as tab}
      <button
        class="tab-item"
        class:active={activeTab === tab.id}
        onclick={() => handleTabClick(tab.id)}
      >
        <div class="icon-wrapper">
          <img 
            src={tab.icon} 
            alt={tab.label}
            class="tab-icon"
          />
        </div>
      </button>
    {/each}
  </div>
</nav>

<style>
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  
  .tab-bar-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 70px;
  }
  
  .tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  
  .icon-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }
  
  .tab-item.active .icon-wrapper {
    background: rgb(190, 210, 238);
  }
  
  .tab-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    opacity: 0.4;
  }
  
  .tab-item.active .tab-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(192deg) brightness(104%) contrast(97%);
    opacity: 1;
  }
  
  
</style>