63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { IpInfo } from '@shared/types'
|
|
import { useLanguage } from '../contexts/LanguageContext'
|
|
import './IpInfoCard.css'
|
|
|
|
interface IpInfoCardProps {
|
|
info: IpInfo
|
|
className?: string
|
|
compact?: boolean
|
|
}
|
|
|
|
export default function IpInfoCard({ info, className = '', compact = false }: IpInfoCardProps) {
|
|
const { t } = useLanguage()
|
|
|
|
const asnDisplay = info.asn ? `AS${info.asn}` : '-'
|
|
|
|
if (compact) {
|
|
return (
|
|
<div className={`ip-info-card compact ${className}`}>
|
|
<div className="ip-compact-row">
|
|
<span className="ip-label">IP</span>
|
|
<span className="ip-value">{info.ip}</span>
|
|
<span className="ip-location">{info.city && `${info.city}, `}{info.country || '-'}</span>
|
|
</div>
|
|
<div className="ip-compact-row">
|
|
<span className="ip-org">{info.org || info.isp || '-'}</span>
|
|
<span className="ip-asn">{asnDisplay}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`ip-info-card ${className}`}>
|
|
<div className="ip-main-info">
|
|
<div className="ip-address-row">
|
|
<span className="ip-label">IP</span>
|
|
<span className="ip-value">{info.ip}</span>
|
|
</div>
|
|
<div className="ip-location-row">
|
|
<span className="location-text">
|
|
{info.city && `${info.city}, `}{info.country || '-'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="ip-details-grid">
|
|
<div className="ip-detail-item">
|
|
<span className="detail-label">ISP</span>
|
|
<span className="detail-value">{info.isp || '-'}</span>
|
|
</div>
|
|
<div className="ip-detail-item">
|
|
<span className="detail-label">ASN</span>
|
|
<span className="detail-value">{asnDisplay}</span>
|
|
</div>
|
|
<div className="ip-detail-item full-width">
|
|
<span className="detail-label">{t('组织', 'Organization')}</span>
|
|
<span className="detail-value">{info.org || '-'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|