You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.7 KiB
76 lines
2.7 KiB
/**
|
|
* DXpeditionPanel Component
|
|
* Shows active and upcoming DXpeditions (compact version)
|
|
*/
|
|
import React from 'react';
|
|
|
|
export const DXpeditionPanel = ({ data, loading }) => {
|
|
const getStatusStyle = (expedition) => {
|
|
if (expedition.isActive) {
|
|
return { bg: 'rgba(0, 255, 136, 0.15)', border: 'var(--accent-green)', color: 'var(--accent-green)' };
|
|
}
|
|
if (expedition.isUpcoming) {
|
|
return { bg: 'rgba(0, 170, 255, 0.15)', border: 'var(--accent-cyan)', color: 'var(--accent-cyan)' };
|
|
}
|
|
return { bg: 'var(--bg-tertiary)', border: 'var(--border-color)', color: 'var(--text-muted)' };
|
|
};
|
|
|
|
return (
|
|
<div className="panel" style={{ padding: '8px', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
<div className="panel-header" style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: '6px',
|
|
fontSize: '11px'
|
|
}}>
|
|
<span>🌍 DXPEDITIONS</span>
|
|
{data && (
|
|
<span style={{ fontSize: '9px', color: 'var(--text-muted)' }}>
|
|
{data.active > 0 && <span style={{ color: 'var(--accent-green)' }}>{data.active} active</span>}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ flex: 1, overflowY: 'auto' }}>
|
|
{loading ? (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '10px' }}>
|
|
<div className="loading-spinner" />
|
|
</div>
|
|
) : data?.dxpeditions?.length > 0 ? (
|
|
data.dxpeditions.slice(0, 4).map((exp, idx) => {
|
|
const style = getStatusStyle(exp);
|
|
return (
|
|
<div key={idx} style={{
|
|
padding: '4px 6px',
|
|
marginBottom: '3px',
|
|
background: style.bg,
|
|
borderLeft: `2px solid ${style.border}`,
|
|
borderRadius: '3px',
|
|
fontSize: '11px',
|
|
fontFamily: 'JetBrains Mono, monospace'
|
|
}}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<span style={{ color: 'var(--accent-amber)', fontWeight: '700' }}>{exp.callsign}</span>
|
|
<span style={{ color: style.color, fontSize: '9px' }}>
|
|
{exp.isActive ? '● NOW' : 'SOON'}
|
|
</span>
|
|
</div>
|
|
<div style={{ color: 'var(--text-muted)', fontSize: '10px' }}>
|
|
{exp.entity}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
) : (
|
|
<div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '10px', fontSize: '11px' }}>
|
|
No DXpeditions
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DXpeditionPanel;
|