refactor(decnet_web/AttackerDetail): extract AttackerHeader section

Lift the header (IP, country tag, traversal badge, identity badge)
into its own section component. Tag helper moves to a shared
AttackerDetail/ui.tsx so future sections can reuse it without
re-importing through AttackerDetail.tsx.

- New AttackerDetail/sections/AttackerHeader.tsx (~50 LOC)
- New AttackerDetail/ui.tsx for shared presentational helpers
- AttackerDetail.tsx imports both; local Tag definition deleted
- AttackerHeader.test.tsx covers country present/absent,
  TRAVERSAL badge, IDENTITY click-through, identity null path
This commit is contained in:
2026-05-09 04:39:30 -04:00
parent 22cfb10617
commit 653ae04e88
5 changed files with 130 additions and 54 deletions

View File

@@ -0,0 +1,22 @@
import React from 'react';
/** Pill-style tag chip used throughout the AttackerDetail surface
* for badges, filters, and category labels. Color drives both the
* border and a 15%-alpha fill (the suffix is hex alpha). */
export const Tag: React.FC<{ children: React.ReactNode; color?: string }> = ({
children,
color,
}) => (
<span
style={{
fontSize: '0.7rem',
padding: '2px 8px',
letterSpacing: '1px',
border: `1px solid ${color || 'var(--text-color)'}`,
color: color || 'var(--text-color)',
background: `${color || 'var(--text-color)'}15`,
}}
>
{children}
</span>
);