125 lines
4.5 KiB
TypeScript
125 lines
4.5 KiB
TypeScript
"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>
|
|
);
|
|
}
|