feat: Add breadcrumb navigation to SystemView

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

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,19 +212,57 @@ 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">
<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>
<div className="flex items-center space-x-2">
<Switch
id="clean-mode"
checked={cleanMode}
onCheckedChange={setCleanMode}
/>
<Label htmlFor="clean-mode" className="text-sm text-slate-300">
Clean mode
</Label>
<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>
<div className="flex items-center space-x-2">
<Switch
id="clean-mode"
checked={cleanMode}
onCheckedChange={setCleanMode}
/>
<Label htmlFor="clean-mode" className="text-sm text-slate-300">
Clean mode
</Label>
</div>
</div>
</div>
</div>