Refactor: Create a shared header component

Move breadcrumb and title into a header component for consistent display across pages.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-14 20:16:27 +00:00
parent 638f8f4a93
commit 2c91d01a47
4 changed files with 188 additions and 135 deletions

View File

@@ -1,10 +1,10 @@
import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { toast } from "@/hooks/use-toast";
import { useQueryClient } from "@tanstack/react-query";
import SystemTracker from "@/components/SystemTracker";
import RegionMap from "@/components/RegionMap";
import Header from "@/components/Header";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import {
@@ -212,57 +212,20 @@ 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 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>
<Header level="system" region={region} system={system} />
{/* Clean Mode Toggle */}
<div className="flex-shrink-0 px-4 pb-4">
<div className="flex items-center justify-center gap-4">
<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>