6bd769ef40
- Add migration 013_city_map_coordinates.sql with map coordinates, zones, and agents table - Add /city/map API endpoint in city-service - Add /city/agents and /city/agents/online endpoints - Extend presence aggregator to include agents[] in snapshot - Add AgentsSource for fetching agent data from DB - Create CityMap component with interactive room tiles - Add useCityMap hook for fetching map data - Update useGlobalPresence to include agents - Add map/list view toggle on /city page - Add agent badges to room cards and map tiles
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
/**
|
|
* NavigationBreadcrumbs Component
|
|
*
|
|
* Навігація між шарами: Space → City → DAO → Agent
|
|
*/
|
|
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { ChevronRight } from 'lucide-react';
|
|
|
|
interface NavigationLevel {
|
|
label: string;
|
|
path: string;
|
|
icon?: string;
|
|
}
|
|
|
|
export function NavigationBreadcrumbs() {
|
|
const location = useLocation();
|
|
|
|
// Визначити поточний рівень навігації
|
|
const levels: NavigationLevel[] = [];
|
|
|
|
if (location.pathname.startsWith('/space')) {
|
|
levels.push({ label: 'Space', path: '/space', icon: '🌌' });
|
|
}
|
|
|
|
if (location.pathname.startsWith('/city') || location.pathname.startsWith('/space')) {
|
|
if (!location.pathname.startsWith('/space')) {
|
|
levels.push({ label: 'City', path: '/city-v2', icon: '🏙️' });
|
|
}
|
|
}
|
|
|
|
if (location.pathname.startsWith('/microdao/')) {
|
|
const parts = location.pathname.split('/');
|
|
const daoId = parts[2];
|
|
levels.push(
|
|
{ label: 'City', path: '/city-v2', icon: '🏙️' },
|
|
{ label: daoId, path: `/microdao/${daoId}`, icon: '🏛️' }
|
|
);
|
|
}
|
|
|
|
if (location.pathname.startsWith('/agent/')) {
|
|
const parts = location.pathname.split('/');
|
|
const agentId = parts[2];
|
|
levels.push(
|
|
{ label: 'City', path: '/city-v2', icon: '🏙️' },
|
|
{ label: agentId, path: `/agent/${agentId}`, icon: '🤖' }
|
|
);
|
|
}
|
|
|
|
if (levels.length === 0) return null;
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 px-4 py-2 bg-slate-900/50 border-b border-white/10">
|
|
{levels.map((level, index) => (
|
|
<div key={level.path} className="flex items-center gap-2">
|
|
{index > 0 && (
|
|
<ChevronRight className="w-4 h-4 text-gray-500" />
|
|
)}
|
|
<Link
|
|
to={level.path}
|
|
className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-white/10 transition-colors"
|
|
>
|
|
{level.icon && <span className="text-lg">{level.icon}</span>}
|
|
<span className="text-sm font-medium text-white">
|
|
{level.label}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|
|
|