style: convert top navigation to grouped monochromatic segmented tabs
This commit is contained in:
sandrodach committed
1 parent
b53f7c5fc9
commit
2e7deee9bf
1 file changed
+105
-103
+105
-103
@@ -203,113 +203,115 @@ export const App: React.FC = () => {
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Top Filter / Tab Pills matching Template Screen 3 */}
|
||||
<nav className="flex items-center justify-start sm:justify-center gap-2 overflow-x-auto pb-2 mb-8 no-scrollbar">
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('triage');
|
||||
}}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
|
||||
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
<span>Triage</span>
|
||||
{stats.inboxCount > 0 && (
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-white text-[#1d8cf8]'
|
||||
: 'bg-[#16171a] text-[#1d8cf8]'
|
||||
}`}
|
||||
>
|
||||
{stats.inboxCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('tasks');
|
||||
}}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
|
||||
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<CheckSquare className="w-4 h-4" />
|
||||
<span>Aufgaben</span>
|
||||
{stats.tasksOpenCount > 0 && (
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-white text-[#1d8cf8]'
|
||||
: 'bg-[#16171a] text-[#22c55e]'
|
||||
}`}
|
||||
>
|
||||
{stats.tasksOpenCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('workspace');
|
||||
}}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
|
||||
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
<span>Workspace</span>
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded-full text-[10px] font-bold ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-white text-[#1d8cf8]'
|
||||
: 'bg-[#16171a] text-zinc-400'
|
||||
{/* Monochromatic Segmented Tabs */}
|
||||
<nav className="flex items-center justify-start sm:justify-center mb-8 overflow-x-auto pb-1 no-scrollbar">
|
||||
<div className="inline-flex items-center p-1 bg-[#1c1e22] rounded-xl border border-white/[0.08] shadow-sm gap-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('triage');
|
||||
}}
|
||||
className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
{stats.docsCount}
|
||||
</span>
|
||||
</button>
|
||||
<Layers className={`w-4 h-4 transition-colors ${activeTab === 'triage' ? 'text-white' : 'text-zinc-400'}`} />
|
||||
<span>Triage</span>
|
||||
{stats.inboxCount > 0 && (
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
|
||||
activeTab === 'triage'
|
||||
? 'bg-white/[0.14] text-white'
|
||||
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
{stats.inboxCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('lists');
|
||||
}}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'lists'
|
||||
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
|
||||
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
<span>Geteilte Listen</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('tasks');
|
||||
}}
|
||||
className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
<CheckSquare className={`w-4 h-4 transition-colors ${activeTab === 'tasks' ? 'text-white' : 'text-zinc-400'}`} />
|
||||
<span>Aufgaben</span>
|
||||
{stats.tasksOpenCount > 0 && (
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
|
||||
activeTab === 'tasks'
|
||||
? 'bg-white/[0.14] text-white'
|
||||
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
{stats.tasksOpenCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('ecosystem');
|
||||
}}
|
||||
className={`h-9 px-4 rounded-full text-xs sm:text-sm flex items-center gap-2 flex-shrink-0 transition-all ${
|
||||
activeTab === 'ecosystem'
|
||||
? 'bg-[#1d8cf8] text-white font-semibold shadow-sm'
|
||||
: 'bg-[#222428] text-zinc-400 hover:text-white hover:bg-[#282a2f] border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
<Webhook className="w-4 h-4" />
|
||||
<span>Webhooks & Export</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('workspace');
|
||||
}}
|
||||
className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
<FileText className={`w-4 h-4 transition-colors ${activeTab === 'workspace' ? 'text-white' : 'text-zinc-400'}`} />
|
||||
<span>Workspace</span>
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded text-[10px] font-semibold transition-colors ${
|
||||
activeTab === 'workspace'
|
||||
? 'bg-white/[0.14] text-white'
|
||||
: 'bg-[#16171a] text-zinc-400 border border-white/[0.06]'
|
||||
}`}
|
||||
>
|
||||
{stats.docsCount}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('lists');
|
||||
}}
|
||||
className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
|
||||
activeTab === 'lists'
|
||||
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart className={`w-4 h-4 transition-colors ${activeTab === 'lists' ? 'text-white' : 'text-zinc-400'}`} />
|
||||
<span>Geteilte Listen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
triggerHaptic(10);
|
||||
setActiveTab('ecosystem');
|
||||
}}
|
||||
className={`h-9 px-3.5 rounded-lg text-xs sm:text-sm font-medium flex items-center gap-2 flex-shrink-0 transition-all select-none ${
|
||||
activeTab === 'ecosystem'
|
||||
? 'bg-[#2b2d33] text-white shadow-sm border border-white/[0.12]'
|
||||
: 'text-zinc-400 hover:text-white hover:bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
<Webhook className={`w-4 h-4 transition-colors ${activeTab === 'ecosystem' ? 'text-white' : 'text-zinc-400'}`} />
|
||||
<span>Webhooks & Export</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Tab View Content */}
|
||||
|
||||
Reference in new issue
Block a user