A project tracker for decentralized social media platforms, clients, and tools
bretton.dev
1import type { Network } from '../types/project';
2
3interface TopBarProps {
4 selectedNetwork: Network;
5 onNetworkChange: (network: Network) => void;
6}
7
8export default function TopBar({ selectedNetwork, onNetworkChange }: TopBarProps) {
9 const networks: { value: Network; label: string }[] = [
10 { value: 'atproto', label: 'ATProto' },
11 { value: 'activitypub', label: 'ActivityPub' }
12 ];
13
14 return (
15 <div className="fixed top-0 left-0 right-0 bg-gray-800 border-b border-gray-700 z-50">
16 <div className="container mx-auto px-4">
17 <div className="flex items-center justify-between h-16">
18 <div className="flex items-center gap-3 sm:gap-6">
19 <div className="flex items-center space-x-2">
20 <svg className="w-8 h-8 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
21 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
22 </svg>
23 <h1 className="text-lg sm:text-xl font-bold text-white hidden sm:block">Social Meshes</h1>
24 </div>
25
26 <div className="flex bg-gray-700 rounded-lg p-1">
27 {networks.map(network => (
28 <button
29 key={network.value}
30 onClick={() => onNetworkChange(network.value)}
31 className={`
32 px-4 py-1.5 rounded-md text-sm font-medium transition-colors
33 ${selectedNetwork === network.value
34 ? 'bg-blue-600 text-white'
35 : 'text-gray-300 hover:text-white hover:bg-gray-600'
36 }
37 `}
38 >
39 {network.label}
40 </button>
41 ))}
42 </div>
43 </div>
44
45 <a
46 href="https://tangled.sh/@bretton.dev/socialmeshes-app"
47 target="_blank"
48 rel="noopener noreferrer"
49 className="text-gray-400 hover:text-white transition-colors"
50 title="View source code"
51 >
52 <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
54 </svg>
55 </a>
56 </div>
57 </div>
58 </div>
59 );
60}