ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1import {
2 Upload,
3 History,
4 Settings,
5 BookOpen,
6 Grid3x3,
7 LucideIcon,
8} from "lucide-react";
9
10export type TabId = "upload" | "history" | "settings" | "guides" | "apps";
11
12interface Tab {
13 id: TabId;
14 icon: LucideIcon;
15 label: string;
16}
17
18interface TabNavigationProps {
19 activeTab: TabId;
20 onTabChange: (tab: TabId) => void;
21}
22
23const tabs: Tab[] = [
24 { id: "upload", icon: Upload, label: "Upload" },
25 { id: "history", icon: History, label: "History" },
26 { id: "settings", icon: Settings, label: "Settings" },
27 { id: "guides", icon: BookOpen, label: "Guides" },
28 { id: "apps", icon: Grid3x3, label: "Apps" },
29];
30
31export default function TabNavigation({
32 activeTab,
33 onTabChange,
34}: TabNavigationProps) {
35 return (
36 <div className="overflow-x-auto scrollbar-hide px-4">
37 <div className="flex space-x-1 border-b-2 border-cyan-500/30 dark:border-purple-500/30 min-w-max">
38 {tabs.map((tab) => {
39 const Icon = tab.icon;
40 return (
41 <button
42 key={tab.id}
43 onClick={() => onTabChange(tab.id)}
44 className={`flex items-center space-x-2 px-4 py-3 border-b-2 transition-all whitespace-nowrap ${
45 activeTab === tab.id
46 ? "border-orange-500 dark:border-orange-400 text-orange-650 dark:text-amber-400"
47 : "border-transparent text-purple-750 dark:text-cyan-250 hover:text-purple-900 dark:hover:text-cyan-100"
48 }`}
49 >
50 <Icon className="w-4 h-4" />
51 <span className="font-medium">{tab.label}</span>
52 </button>
53 );
54 })}
55 </div>
56 </div>
57 );
58}