[try] auth

src/components/auth/AuthButton.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { Button, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar, Spinner } from "@heroui/react"
+import { User, Logout, Login, AddUser } from "@icon-park/react"
+import { useAuthStore } from "@/store/auth"
+import { openLoginPage, openSignupPage } from "@/utils/auth"
+import { useDisclosure } from "@heroui/react"
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/react"
+
+export function AuthButton() {
+  const { state, signOut } = useAuthStore()
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+
+  const handleLogin = async () => {
+    await openLoginPage()
+  }
+
+  const handleSignup = async () => {
+    await openSignupPage()
+  }
+
+  const handleSignOut = async () => {
+    await signOut()
+    onOpenChange()
+  }
+
+  if (state.isLoading) {
+    return (
+      <Button
+        isIconOnly
+        variant="light"
+        size="sm"
+        className="px-2 py-0 rounded transition duration-150 hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
+      >
+        <Spinner size="sm" />
+      </Button>
+    )
+  }
+
+  if (state.isAuthenticated && state.user) {
+    return (
+      <>
+        <Dropdown placement="bottom-end">
+          <DropdownTrigger>
+            <Button
+              isIconOnly
+              variant="light"
+              size="sm"
+              className="px-2 py-0 rounded transition duration-150 hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
+            >
+              <Avatar
+                src={state.user.user_metadata?.avatar_url}
+                name={state.user.email || state.user.id}
+                size="sm"
+                className="w-6 h-6"
+              />
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu aria-label="用户菜单">
+            <DropdownItem
+              key="profile"
+              startContent={<User size={16} />}
+              textValue="用户信息"
+            >
+              <div className="flex flex-col">
+                <span className="text-sm font-medium">{state.user.email}</span>
+                {state.user.user_metadata?.name && (
+                  <span className="text-xs text-zinc-500">{state.user.user_metadata.name}</span>
+                )}
+              </div>
+            </DropdownItem>
+            <DropdownItem
+              key="logout"
+              startContent={<Logout size={16} />}
+              color="danger"
+              onPress={onOpen}
+            >
+              退出登录
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+        <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+          <ModalContent>
+            {(onClose) => (
+              <>
+                <ModalHeader className="flex flex-col gap-1">退出登录</ModalHeader>
+                <ModalBody>
+                  <p>确认要退出登录吗？</p>
+                </ModalBody>
+                <ModalFooter>
+                  <Button color="default" variant="light" onPress={onClose}>
+                    取消
+                  </Button>
+                  <Button
+                    color="danger"
+                    onPress={() => {
+                      handleSignOut()
+                    }}
+                  >
+                    确认退出
+                  </Button>
+                </ModalFooter>
+              </>
+            )}
+          </ModalContent>
+        </Modal>
+      </>
+    )
+  }
+
+  return (
+    <Dropdown placement="bottom-end">
+      <DropdownTrigger>
+        <Button
+          isIconOnly
+          variant="light"
+          size="sm"
+          className="px-2 py-0 rounded transition duration-150 hover:bg-black/10 dark:hover:bg-zinc-100/10 active:scale-95"
+        >
+          <User size={16} />
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="登录菜单">
+        <DropdownItem
+          key="login"
+          startContent={<Login size={16} />}
+          onPress={handleLogin}
+        >
+          登录
+        </DropdownItem>
+        <DropdownItem
+          key="signup"
+          startContent={<AddUser size={16} />}
+          onPress={handleSignup}
+        >
+          注册
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  )
+}
+