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 { Card, CardContent } from "@/components/ui/card";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Zap, Shield, Coins, HelpCircle } from "lucide-react";
|
|
||||||
import { SigviewRecord as Signature } from "@/lib/pbtypes";
|
import { SigviewRecord as Signature } from "@/lib/pbtypes";
|
||||||
|
import { getSignatureMeta } from "@/hooks/useSignatureCategories";
|
||||||
|
|
||||||
interface SignatureCardProps {
|
interface SignatureCardProps {
|
||||||
signature: Signature;
|
signature: Signature;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SignatureCard = ({ signature }: SignatureCardProps) => {
|
export const SignatureCard = ({ signature }: SignatureCardProps) => {
|
||||||
const getTypeIcon = (type: string) => {
|
const meta = getSignatureMeta(signature.type);
|
||||||
const lowerType = type.toLowerCase();
|
const isGasSite = signature.type?.toLowerCase().includes('gas');
|
||||||
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';
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
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">
|
<CardContent className="pt-6">
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{/* Type Badge - Most Important */}
|
{/* Type Badge - Most Important */}
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
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'}
|
{signature.type || 'Unknown Type'}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -43,13 +43,14 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const meta = getSignatureMeta(signature.type || "");
|
const meta = getSignatureMeta(signature.type || "");
|
||||||
|
const isGasSite = signature.type?.toLowerCase().includes('gas');
|
||||||
const oldEntry = isOld();
|
const oldEntry = isOld();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<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">
|
<div className="flex items-center gap-4 flex-1">
|
||||||
{/* Type Badge - Most Important */}
|
{/* Type Badge - Most Important */}
|
||||||
|
|||||||
@@ -43,8 +43,8 @@ const allCategories = new Map<string, SignatureCategoryMeta>([
|
|||||||
matcher: /^gas/i,
|
matcher: /^gas/i,
|
||||||
id: "gas",
|
id: "gas",
|
||||||
name: 'Gas Sites',
|
name: 'Gas Sites',
|
||||||
icon: <Gauge className="h-4 w-4 text-green-400" />,
|
icon: <Gauge className="h-4 w-4 text-emerald-400" />,
|
||||||
color: "text-green-400 border-green-600"
|
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", {
|
["ore", {
|
||||||
matcher: /^ore/i,
|
matcher: /^ore/i,
|
||||||
|
|||||||
Reference in New Issue
Block a user