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:
22
decnet_web/src/components/AttackerDetail/ui.tsx
Normal file
22
decnet_web/src/components/AttackerDetail/ui.tsx
Normal 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>
|
||||
);
|
||||
Reference in New Issue
Block a user