43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {useRouter} from "next/navigation";
|
|
import { LogOut } from "lucide-react";
|
|
import useUserStore from "@/store/user";
|
|
|
|
/**
|
|
* 退出入口的展示参数。
|
|
*/
|
|
interface SignOutLinkProps {
|
|
/** 顶部展示的当前账号邮箱。 */
|
|
email?: string;
|
|
}
|
|
|
|
/** onboarding 顶部的退出入口，当前只保留 UI 和点击状态，不接真实退出接口。 */
|
|
export function SignOutLink({ email = "you@brand.com" }: SignOutLinkProps) {
|
|
const [busy, setBusy] = useState(false);
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
|
|
/** 退出点击占位，后续接入真实认证时在这里调用退出接口。 */
|
|
function handleSignOut() {
|
|
setBusy(true);
|
|
userStore.logout();
|
|
router.replace("/login");
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<span className="hidden sm:inline">{email}</span>
|
|
<button
|
|
type="button"
|
|
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"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|