🎉 first commit

app/components/auth/AuthButtons.tsx

@@ -0,0 +1,70 @@
+import { useNavigate } from '@remix-run/react';
+import { useEffect, useState } from 'react';
+import { Button } from '~/components/ui/Button';
+import { useAuth } from '~/lib/hooks/useAuth';
+
+export function SignInButton({ className, children = '登录' }: { className?: string; children?: React.ReactNode }) {
+  const { signIn, isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/');
+    }
+  }, [isAuthenticated, navigate]);
+
+  const handleSignIn = () => {
+    signIn('/api/auth/callback');
+  };
+
+  return (
+    <Button onClick={handleSignIn} className={className} disabled={isAuthenticated}>
+      {children}
+    </Button>
+  );
+}
+
+export function SignOutButton({ className, children = '登出' }: { className?: string; children?: React.ReactNode }) {
+  const { signOut, isAuthenticated } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSignOut = async () => {
+    if (!isAuthenticated) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await signOut();
+    } catch (error) {
+      console.error('登出失败:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button onClick={handleSignOut} className={className} disabled={!isAuthenticated || isLoading}>
+      {isLoading ? '正在登出...' : children}
+    </Button>
+  );
+}
+
+export function UserAuthButton({
+  className,
+  signInText = '登录',
+  signOutText = '登出',
+}: {
+  className?: string;
+  signInText?: React.ReactNode;
+  signOutText?: React.ReactNode;
+}) {
+  const { isAuthenticated } = useAuth();
+
+  return isAuthenticated ? (
+    <SignOutButton className={className}>{signOutText}</SignOutButton>
+  ) : (
+    <SignInButton className={className}>{signInText}</SignInButton>
+  );
+}