T
z4$h-SV3;csA(GK2put)|zxe?eHwT+9*l3XsV?put#~}dw7)gm)`q#(25dfjx9{adB
z&r{r3z%*#Arom%Q3t}rDcN+yS!~r6DZGFjpma;C!i7o&mVxh<-Cad>{aY0$P7Nj;|jERK;#cP!fgN{lF`_wUK7z|?2T8&3IpNg`B5NQSO#(o}U
z&fjW4rdBBn5s2;p(?2z8gfP`L%}&XnRiS@!rGK$vHs)(IS5GQ8MX(03fzrjs*?#4
z54tSti6CfYYKLrpfv?10^RG}_!GBSU_RStbt@{E;oIL<0n4s5Y+~N)PCw{I(f7}_;
zEP;I|EEpFh9Xxwo5v_lhjuLG?FwIRF)}1D&SLW#MYcE^?Uj|KrI0|5u#BG^w@>HW5
l#`JGjT2VCQKBy&!+avXpR|1Bm1Aq0ZuBx#Tx&1b<{|~G@=I{Uj
diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx
new file mode 100644
index 000000000..517cb2d81
--- /dev/null
+++ b/src/components/card/user-card.tsx
@@ -0,0 +1,92 @@
+import { TooltipArrow, TooltipPortal } from "@radix-ui/react-tooltip";
+import { motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import { useMemo, useState } from "react";
+
+import { deleteUserCookie } from "~/actions/login";
+import { useUser } from "~/hooks/user/use-user";
+import { cn } from "~/lib/utils";
+import { Button } from "../ui/button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "../ui/tooltip";
+
+const generateTailwindBGs = () => {
+ const colors = [
+ "bg-red-500",
+ "bg-orange-500",
+ "bg-yellow-500",
+ "bg-green-500",
+ "bg-teal-500",
+ "bg-blue-500",
+ "bg-indigo-500",
+ "bg-purple-500",
+ "bg-pink-500",
+ ];
+ const randomColor = colors[Math.floor(Math.random() * colors.length)];
+ return randomColor;
+};
+
+const UserCard = ({ email }: { email: string }) => {
+ const { updateUser } = useUser();
+ const [bgColor, setBgColor] = useState("bg-red-500");
+ const pathname = usePathname();
+
+ useMemo(() => {
+ if (pathname === "/") {
+ setBgColor(generateTailwindBGs());
+ }
+ }, [pathname]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default UserCard;
diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index c1df39fe7..07a0677ef 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -4,7 +4,9 @@ import { BellIcon, Menu, User } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";
+import UserCard from "~/components/card/user-card";
import Logo from "~/components/common/logo";
+import { useUser } from "~/hooks/user/use-user";
const navlinks = [
{ route: "Home", link: "/" },
@@ -14,6 +16,7 @@ const navlinks = [
const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
const [scrolling, setIsScrolling] = useState(false);
+ const { user } = useUser();
//
@@ -33,9 +36,7 @@ const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
});
return (