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

Refactor: Create a shared header component

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

131
src/components/RegionMap.tsx
View File

@@ -1,18 +1,10 @@
import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { MapNode } from './MapNode';
import { Connection } from './Connection';
import { useQuery } from '@tanstack/react-query';
import { getSecurityColor } from '../utils/securityColors';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import Header from './Header';
const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
@@ -306,81 +298,58 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
<div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
<div className="relative z-10 p-8">
{/* Breadcrumb Navigation */}
<div className="mb-6">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink
onClick={() => navigate("/")}
className="text-purple-200 hover:text-white cursor-pointer"
>
Universe
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="text-slate-400" />
<BreadcrumbItem>
<BreadcrumbPage className="text-white font-semibold">
{regionName}
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div className="relative z-10 h-full flex flex-col">
<Header level="region" region={regionName} />
<div className="mb-8">
<h1 className="text-4xl font-bold text-white mb-2">{regionName}</h1>
<p className="text-purple-200">Solar systems in this region</p>
</div>
<div className="flex-1 overflow-hidden px-8 pb-8">
<div className="w-full h-full border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
<svg
ref={svgRef}
width="100%"
height="100%"
viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
className="cursor-grab active:cursor-grabbing"
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseUp}
onWheel={handleWheel}
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
<svg
ref={svgRef}
width="100%"
height="100%"
viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
className="cursor-grab active:cursor-grabbing"
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseUp}
onWheel={handleWheel}
>
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
{/* Render connections */}
{processedConnections.map(connection => (
<Connection
key={connection.key}
from={connection.from}
to={connection.to}
color={connection.color}
/>
))}
{/* Render connections */}
{processedConnections.map(connection => (
<Connection
key={connection.key}
from={connection.from}
to={connection.to}
color={connection.color}
/>
))}
{/* Render systems */}
{systems?.map((system) => (
<MapNode
key={system.solarSystemName}
id={system.solarSystemName}
name={system.solarSystemName}
position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
onClick={() => handleSystemClick(system.solarSystemName)}
type="system"
security={system.security}
signatures={system.signatures}
/>
))}
</svg>
{/* Render systems */}
{systems?.map((system) => (
<MapNode
key={system.solarSystemName}
id={system.solarSystemName}
name={system.solarSystemName}
position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
onClick={() => handleSystemClick(system.solarSystemName)}
type="system"
security={system.security}
signatures={system.signatures}
/>
))}
</svg>
</div>
</div>
</div>
</div>