1

src/app/onboarding/components/sign-out-link/index.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { LogOut } from "lucide-react";
+
+/**
+ * 退出入口的展示参数。
+ */
+interface SignOutLinkProps {
+  /** 顶部展示的当前账号邮箱。 */
+  email?: string;
+}
+
+/** onboarding 顶部的退出入口，当前只保留 UI 和点击状态，不接真实退出接口。 */
+export function SignOutLink({ email = "you@brand.com" }: SignOutLinkProps) {
+  const [busy, setBusy] = useState(false);
+
+  /** 退出点击占位，后续接入真实认证时在这里调用退出接口。 */
+  function handleSignOut() {
+    setBusy(true);
+    setTimeout(() => setBusy(false), 300);
+  }
+
+  return (
+    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+      <span className="hidden sm:inline">{email}</span>
+      <Link
+        href="/login"
+        onClick={handleSignOut}
+        className="inline-flex items-center gap-1 rounded-md px-2 py-1 transition-colors hover:bg-muted hover:text-foreground"
+      >
+        <LogOut className="h-3 w-3" aria-hidden="true" />
+        {busy ? "Signing out..." : "Sign out"}
+      </Link>
+    </div>
+  );
+}