Most simple components created

lib/component/nav/PopoverMenu.tsx

@@ -0,0 +1,35 @@
+import type { PopoverMenuProps } from "$/types/Nav";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import clsx from "clsx";
+import { RiArrowRightSLine } from "react-icons/ri";
+
+export default function PopoverMenu(props: PopoverMenuProps){
+	const {
+		buttonContent,
+		anchor,
+		children
+	} = props;
+
+
+	return (
+		<Popover>
+			<PopoverButton
+				className={clsx(
+					"flex flex-row flex-nowrap items-center justify-center",
+					"cursor-pointer outline-none h-full"
+				)}
+			>
+				{buttonContent} <RiArrowRightSLine strokeWidth={2} size={24}/>
+			</PopoverButton>
+			<PopoverPanel
+				anchor={{to: anchor}}
+				className={clsx(
+					"flex flex-col items-start justify-center",
+					"bg-(--bg-color) border border-neutral-400 outline-none mt-3"
+				)}
+			>
+				{children}
+			</PopoverPanel>
+		</Popover>
+	);
+}