dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: Add breadcrumb navigation to SystemView

Browse Source 
Adds a breadcrumb navigation to the SystemView component, allowing users to navigate to the region and universe levels. The breadcrumb displays the path "Universe > $region > $system" with clickable links for each level.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-14 20:09:05 +00:00
parent 8db6c9830e
commit 9277f38377
1 changed files with 59 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/SystemView.tsx
View File

@@ -7,6 +7,14 @@ import SystemTracker from "@/components/SystemTracker";
import RegionMap from "@/components/RegionMap";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import pb from "@/lib/pocketbase";
interface Signature {
@@ -204,7 +212,44 @@ const SystemView = () => {
return (
<div className="h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
<div className="h-full flex flex-col">
<div className="flex-shrink-0 text-center py-8 px-4">
<div className="flex-shrink-0 py-6 px-4">
{/* Breadcrumb Navigation */}
<div className="mb-4">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink
onClick={() => navigate("/")}
className="text-purple-200 hover:text-white cursor-pointer"
>
Universe
</BreadcrumbLink>
</BreadcrumbItem>
{region && (
<>
<BreadcrumbSeparator className="text-slate-400" />
<BreadcrumbItem>
<BreadcrumbLink
onClick={() => navigate(`/regions/${region}`)}
className="text-purple-200 hover:text-white cursor-pointer"
>
{region}
</BreadcrumbLink>
</BreadcrumbItem>
</>
)}
<BreadcrumbSeparator className="text-slate-400" />
<BreadcrumbItem>
<BreadcrumbPage className="text-white font-semibold">
{system}
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
{/* System Title and Controls */}
<div className="text-center">
<h1 className="text-4xl font-bold text-white mb-2">System: {system}</h1>
<div className="flex items-center justify-center gap-4 text-slate-300">
<p>Press Ctrl+V to paste signatures</p>
@@ -220,6 +265,7 @@ const SystemView = () => {
</div>
</div>
</div>
</div>
<div className="flex-1 overflow-hidden px-4 pb-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">