feat: Add breadcrumb to region map and remove back button
Adds breadcrumb navigation to the region map and removes the "Back to Galaxy" button for consistency.
This commit is contained in:
@@ -1,11 +1,18 @@
|
||||
|
||||
import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { MapNode } from './MapNode';
|
||||
import { Connection } from './Connection';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getSecurityColor } from '../utils/securityColors';
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from '@/components/ui/breadcrumb';
|
||||
|
||||
const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
|
||||
|
||||
@@ -211,15 +218,6 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
|
||||
<p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
|
||||
{!isCompact && (
|
||||
<Button
|
||||
onClick={() => navigate('/')}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Return to Galaxy Map
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -309,19 +307,32 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
|
||||
<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">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
{/* 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="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>
|
||||
<Button
|
||||
onClick={() => navigate('/')}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back to Galaxy
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
|
||||
<svg
|
||||
|
Reference in New Issue
Block a user