Refactor: Create a shared header component
Move breadcrumb and title into a header component for consistent display across pages.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user