release 0.3.4

2023-11-10 14:59:47 +08:00
parent 2b456637e9
commit 602f2059fd
161 changed files with 9921 additions and 347 deletions
--- a/apps/web/ui/layout/user-dropdown.tsx
+++ b/apps/web/ui/layout/user-dropdown.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { Dispatch, SetStateAction, useState } from "react";
+import { signOut } from "next-auth/react";
+import { LogOut, UserCog, ShieldCheck, Settings, Mail } from "lucide-react";
+import Popover from "@/ui/shared/popover";
+import Image from "next/image";
+import { Session } from "next-auth";
+import { generateName, greeting } from "@/lib/utils";
+import { useUserInfoByEmail } from "@/app/post/[id]/request";
+import { useRouter } from "next/navigation";
+
+export default function UserDropdown({
+  className,
+  session,
+  setShowEditModal,
+}: {
+  className?: string;
+  session: Session;
+  setShowEditModal: Dispatch<SetStateAction<boolean>>;
+}) {
+  const router = useRouter();
+  const { email } = session?.user || {};
+  const { user } = useUserInfoByEmail(session?.user?.email || "");
+  const [openPopover, setOpenPopover] = useState(false);
+
+  if (!email) return null;
+
+  return (
+    <div className={className + " relative inline-block text-left"}>
+      <Popover
+        content={
+          <div className="w-full rounded-md bg-white p-2 sm:w-[270px]">
+            {user && (
+              <button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100">
+                <span className="truncate font-semibold text-slate-700">
+                  {greeting()}, {user?.name || `${generateName(user.id || "")}`}
+                </span>
+              </button>
+            )}
+            <button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100">
+              <Mail className="h-4 w-4" />
+              <span className="truncate text-sm">{email}</span>
+            </button>
+
+            <hr className="my-2" />
+
+            <button
+              className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
+              onClick={() => {
+                router.push("/pricing");
+              }}
+            >
+              <ShieldCheck
+                className={
+                  user?.plan !== "0"
+                    ? "h-4 w-4 text-blue-500"
+                    : "h-4 w-4 text-yellow-500"
+                }
+              />
+              <span
+                className={
+                  "text-sm " + (user?.plan !== "0" ? "" : "text-yellow-500")
+                }
+              >
+                {user && (
+                  <span className="text-sm">
+                    {user?.plan !== "0" ? "Actived plan" : "Upgrade to Pro"}
+                  </span>
+                )}
+              </span>
+            </button>
+
+            <button
+              className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
+              onClick={() => {
+                setShowEditModal(true);
+                setOpenPopover(false);
+              }}
+            >
+              <UserCog className="h-4 w-4" />
+              <span className="text-sm">Edit nickname</span>
+            </button>
+
+            {/* <button
+              className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
+              onClick={() => {
+                router.push("/settings");
+              }}
+            >
+              <Settings className="h-4 w-4" />
+              <span className="text-sm">Preferences</span>
+            </button> */}
+
+            <hr className="my-2" />
+
+            <button
+              className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100"
+              onClick={() => signOut()}
+            >
+              <LogOut className="h-4 w-4" />
+              <span className="text-sm">Sign out</span>
+            </button>
+          </div>
+        }
+        align="end"
+        openPopover={openPopover}
+        setOpenPopover={setOpenPopover}
+      >
+        <button
+          onClick={() => setOpenPopover(!openPopover)}
+          className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-yellow-50 transition-all duration-75 focus:outline-none active:scale-95 sm:h-9 sm:w-9"
+        >
+          <Image
+            alt={email}
+            src={user && user.image ? user.image : "/cat.png"}
+            width={40}
+            height={40}
+          />
+        </button>
+      </Popover>
+    </div>
+  );
+}