feat: dashboard link

src/components/Header.tsx

@@ -1,9 +1,9 @@
-"use client";
-
 // import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { ModeToggle } from "@/components/ThemeSwitcher";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
+import { fetchLoginUser } from "@/lib/nezha-api";
+import { useQuery } from "@tanstack/react-query";
 import { DateTime } from "luxon";
 import { useEffect, useRef, useState } from "react";
 
@@ -31,6 +31,7 @@ function Header() {
           </p>
         </section>
         <section className="flex items-center gap-2">
+          <DashboardLink />
           {/* <LanguageSwitcher /> */}
           <ModeToggle />
         </section>
@@ -40,6 +41,30 @@ function Header() {
   );
 }
 
+function DashboardLink() {
+  const { data: userData } = useQuery({
+    queryKey: ["login-user"],
+    queryFn: () => fetchLoginUser(),
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+  });
+
+  if (!userData?.data?.id) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      <a
+        href={"/dashboard"}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex items-center gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
+      >
+        Dashboard
+      </a>
+    </div>
+  );
+}
+
 // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
 const useInterval = (callback: () => void, delay: number | null) => {
   const savedCallback = useRef<() => void>(() => {});