From f4250a4fdb47f7d359bc584a7087479365ad0639 Mon Sep 17 00:00:00 2001 From: John Doe Date: Wed, 13 Sep 2023 21:11:32 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Implemented=20AvatarDropdown=20c?= =?UTF-8?q?omponent=20=F0=9F=8E=89=20Added=20user=20profile=20information?= =?UTF-8?q?=20=F0=9F=92=A1=20Improved=20accessibility=20of=20AvatarDropdow?= =?UTF-8?q?n=20=F0=9F=8C=9F=20Added=20dark=20mode=20toggle=20functionality?= =?UTF-8?q?=20=F0=9F=90=9B=20Fixed=20minor=20styling=20issue=20in=20Avatar?= =?UTF-8?q?Dropdown=20=F0=9F=93=9D=20Updated=20comments=20in=20AvatarDropd?= =?UTF-8?q?own=20component=20=F0=9F=94=84=20Refactored=20AvatarDropdown=20?= =?UTF-8?q?for=20better=20performance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(Header)/AvatarDropdown.tsx | 314 ++++++++++++++++++ 1 file changed, 314 insertions(+) create mode 100644 src/app/(client-components)/(Header)/AvatarDropdown.tsx diff --git a/src/app/(client-components)/(Header)/AvatarDropdown.tsx b/src/app/(client-components)/(Header)/AvatarDropdown.tsx new file mode 100644 index 0000000..9c25fc6 --- /dev/null +++ b/src/app/(client-components)/(Header)/AvatarDropdown.tsx @@ -0,0 +1,314 @@ +import { Popover, Transition } from "@headlessui/react"; +import { Fragment } from "react"; +import Avatar from "@/shared/Avatar"; +import SwitchDarkMode2 from "@/shared/SwitchDarkMode2"; +import Link from "next/link"; +interface Props { + className?: string; +} + +export default function AvatarDropdown({ className = "" }: Props) { + return ( + <> + + {({ open, close }) => ( + <> + + + + + +
+
+
+ + +
+

Eden Smith

+

Los Angeles, CA

+
+
+ +
+ + {/* ------------------ 1 --------------------- */} + close()} + > +
+ + + + +
+
+

{"My Account"}

+
+ + + {/* ------------------ 2 --------------------- */} + close()} + > +
+ + + + + + +
+
+

{"My bookings"}

+
+ + + {/* ------------------ 2 --------------------- */} + close()} + > +
+ + + +
+
+

{"Wishlist"}

+
+ + +
+ + {/* ------------------ 2 --------------------- */} +
+
+
+ + + + + +
+
+

{"Dark theme"}

+
+
+ +
+ + {/* ------------------ 2 --------------------- */} + close()} + > +
+ + + + + + + + +
+
+

{"Help"}

+
+ + + {/* ------------------ 2 --------------------- */} + close()} + > +
+ + + + + +
+
+

{"Log out"}

+
+ +
+
+ + + + )} + + + ); +}