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 React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { MapNode } from './MapNode';
|
import { MapNode } from './MapNode';
|
||||||
import { Connection } from './Connection';
|
import { Connection } from './Connection';
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { ArrowLeft } from 'lucide-react';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { getSecurityColor } from '../utils/securityColors';
|
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`;
|
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">
|
<div className="text-center">
|
||||||
<h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
|
<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>
|
<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>
|
||||||
</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="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="relative z-10 p-8">
|
||||||
<div className="flex items-center justify-between mb-8">
|
{/* Breadcrumb Navigation */}
|
||||||
<div>
|
<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>
|
<h1 className="text-4xl font-bold text-white mb-2">{regionName}</h1>
|
||||||
<p className="text-purple-200">Solar systems in this region</p>
|
<p className="text-purple-200">Solar systems in this region</p>
|
||||||
</div>
|
</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">
|
<div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
|
||||||
<svg
|
<svg
|
||||||
|
Reference in New Issue
Block a user