From 03fdf3f9bc36c4b8c8304b0711b9984f2e386fc6 Mon Sep 17 00:00:00 2001
From: aken1023 <aken1023@gmail.com>
Date: Fri, 1 Aug 2025 12:47:59 +0800
Subject: [PATCH] Add IP address display component to navigation

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.
---
 app/page.tsx              | 11 ++++++++
 components/ip-display.tsx | 57 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 components/ip-display.tsx

diff --git a/app/page.tsx b/app/page.tsx
index cc6d98b..f92cb67 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,6 +5,7 @@ import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Sparkles, MessageCircle, Users, BarChart3 } from "lucide-react"
 import HeaderMusicControl from "@/components/header-music-control"
+import IpDisplay from "@/components/ip-display"
 
 interface Star {
   id: number;
@@ -88,6 +89,11 @@ export default function HomePage() {
 
             {/* 導航區域 */}
             <nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
+              {/* IP顯示 */}
+              <div className="hidden sm:block">
+                <IpDisplay />
+              </div>
+              
               {/* 音樂控制 */}
               <div className="hidden sm:block">
                 <HeaderMusicControl />
@@ -148,6 +154,11 @@ export default function HomePage() {
 
               {/* 手機版導航 - 使用文字而非圖標 */}
               <div className="flex sm:hidden items-center gap-1">
+                {/* 手機版IP顯示 */}
+                <div className="sm:hidden">
+                  <IpDisplay mobileSimplified />
+                </div>
+                
                 <Link href="/analytics">
                   <Button
                     variant="ghost"
diff --git a/components/ip-display.tsx b/components/ip-display.tsx
new file mode 100644
index 0000000..28ae3eb
--- /dev/null
+++ b/components/ip-display.tsx
@@ -0,0 +1,57 @@
+"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>
+  )
+} 
\ No newline at end of file