Refactor a bit more shit and make gas sites GLOW
This commit is contained in:
@@ -1,41 +1,27 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Zap, Shield, Coins, HelpCircle } from "lucide-react";
|
||||
import { SigviewRecord as Signature } from "@/lib/pbtypes";
|
||||
import { getSignatureMeta } from "@/hooks/useSignatureCategories";
|
||||
|
||||
interface SignatureCardProps {
|
||||
signature: Signature;
|
||||
}
|
||||
|
||||
export const SignatureCard = ({ signature }: SignatureCardProps) => {
|
||||
const getTypeIcon = (type: string) => {
|
||||
const lowerType = type.toLowerCase();
|
||||
if (lowerType.includes('combat')) return <Zap className="h-4 w-4" />;
|
||||
if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return <Shield className="h-4 w-4" />;
|
||||
if (lowerType.includes('ore') || lowerType.includes('gas')) return <Coins className="h-4 w-4" />;
|
||||
return <HelpCircle className="h-4 w-4" />;
|
||||
};
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
const lowerType = type.toLowerCase();
|
||||
if (lowerType.includes('combat')) return 'bg-red-900/30 text-red-300 border-red-600';
|
||||
if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return 'bg-blue-900/30 text-blue-300 border-blue-600';
|
||||
if (lowerType.includes('ore') || lowerType.includes('gas')) return 'bg-yellow-900/30 text-yellow-300 border-yellow-600';
|
||||
if (!type || type === '') return 'bg-slate-700 text-slate-300 border-slate-600';
|
||||
return 'bg-purple-900/30 text-purple-300 border-purple-600';
|
||||
};
|
||||
const meta = getSignatureMeta(signature.type);
|
||||
const isGasSite = signature.type?.toLowerCase().includes('gas');
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-800/40 border-slate-700 hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600">
|
||||
<Card className={`${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : 'bg-slate-800/40 border-slate-700'} hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600`}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-3">
|
||||
{/* Type Badge - Most Important */}
|
||||
<div className="flex items-center justify-center">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`${getTypeColor(signature.type)} px-3 py-1 text-sm font-semibold flex items-center gap-2`}
|
||||
className={`${meta.color} px-3 py-1 text-sm font-semibold flex items-center gap-2`}
|
||||
>
|
||||
{getTypeIcon(signature.type)}
|
||||
{meta.icon}
|
||||
{signature.type || 'Unknown Type'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
@@ -43,13 +43,14 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
|
||||
};
|
||||
|
||||
const meta = getSignatureMeta(signature.type || "");
|
||||
|
||||
const isGasSite = signature.type?.toLowerCase().includes('gas');
|
||||
const oldEntry = isOld();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : ""
|
||||
}`}
|
||||
className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${
|
||||
oldEntry ? "opacity-50" : ""
|
||||
} ${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
{/* Type Badge - Most Important */}
|
||||
|
||||
@@ -43,8 +43,8 @@ const allCategories = new Map<string, SignatureCategoryMeta>([
|
||||
matcher: /^gas/i,
|
||||
id: "gas",
|
||||
name: 'Gas Sites',
|
||||
icon: <Gauge className="h-4 w-4 text-green-400" />,
|
||||
color: "text-green-400 border-green-600"
|
||||
icon: <Gauge className="h-4 w-4 text-emerald-400" />,
|
||||
color: "bg-emerald-900/40 text-emerald-200 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)] transition-all duration-300"
|
||||
}],
|
||||
["ore", {
|
||||
matcher: /^ore/i,
|
||||
|
||||
Reference in New Issue
Block a user