aken1023
03fdf3f9bc
Introduced a new IpDisplay component that fetches and shows the user's IP address using the ipify API. Integrated the component into both desktop and mobile navigation areas, with a simplified display for mobile devices.
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Globe } from "lucide-react"
|
|
|
|
interface IpDisplayProps {
|
|
mobileSimplified?: boolean
|
|
}
|
|
|
|
export default function IpDisplay({ mobileSimplified = false }: IpDisplayProps) {
|
|
const [ip, setIp] = useState<string>("")
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const fetchIp = async () => {
|
|
try {
|
|
// 使用 ipify API 來獲取客戶端IP
|
|
const response = await fetch("https://api.ipify.org?format=json")
|
|
const data = await response.json()
|
|
setIp(data.ip)
|
|
} catch (error) {
|
|
console.error("無法獲取IP地址:", error)
|
|
setIp("未知")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchIp()
|
|
}, [])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className={`flex items-center gap-1.5 px-2 py-1 bg-slate-800/50 rounded-md border border-blue-800/30 ${mobileSimplified ? 'text-xs' : ''}`}>
|
|
<Globe className={`${mobileSimplified ? 'w-2.5 h-2.5' : 'w-3 h-3'} text-blue-300`} />
|
|
<span className="text-xs text-blue-200">載入中...</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 手機版簡化顯示
|
|
if (mobileSimplified) {
|
|
return (
|
|
<div className="flex items-center gap-1 px-1.5 py-0.5 bg-slate-800/50 rounded border border-blue-800/30 backdrop-blur-sm">
|
|
<Globe className="w-2.5 h-2.5 text-blue-300" />
|
|
<span className="text-xs text-blue-200 font-mono">{ip.split('.').slice(0, 2).join('.')}...</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5 px-2 py-1 bg-slate-800/50 rounded-md border border-blue-800/30 backdrop-blur-sm">
|
|
<Globe className="w-3 h-3 text-blue-300" />
|
|
<span className="text-xs text-blue-200 font-mono">{ip}</span>
|
|
</div>
|
|
)
|
|
}
|