core menu component ✅

Author: ariflogs

app/(sink)/demo/components/page.tsx

@@ -6,6 +6,7 @@ import {
   Avatar,
   Badge,
   Button,
+  Menu,
   Tabs,
   TabsContent,
   TabsPanels,
@@ -99,6 +100,26 @@ export default function page() {
           </div>
         </Alert>
       </div>
+
+      <div>
+        <Menu>
+          <Menu.Trigger asChild>
+            <Button>Menu</Button>
+          </Menu.Trigger>
+          {/* <Menu.Trigger asChild>
+            <button className="IconButton" aria-label="Customise options">
+              Click Me
+            </button>
+          </Menu.Trigger> */}
+          <Menu.Content className="min-w-36">
+            <Menu.Item>Menu Item 1</Menu.Item>
+            <Menu.Item>Menu Item 2</Menu.Item>
+            <Menu.Item>Menu Item 3</Menu.Item>
+          </Menu.Content>
+        </Menu>
+      </div>
+
+      <div className="h-36"></div>
     </div>
   );
 }

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

packages/ui/Buttons/Button.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import React, { ButtonHTMLAttributes } from "react";
 
-const buttonVariants = cva("font-head transition-all", {
+const buttonVariants = cva("font-head transition-all outline-none", {
   variants: {
     variant: {
       default:
@@ -39,6 +39,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
     forwardedRef
   ) => (
     <button
+      ref={forwardedRef}
       className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     >

packages/ui/Cards/Card.tsx

@@ -1,7 +1,6 @@
 import { cn } from "@/lib/utils";
 import { HTMLAttributes } from "react";
 import { Text } from "../Text";
-import { Content } from "next/font/google";
 
 interface ICardProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;

packages/ui/Menu/Menu.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import React, { HTMLAttributes } from "react";
+
+const Menu = DropdownMenu.Root;
+const Trigger = DropdownMenu.Trigger;
+
+interface IMenuContent extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const Content = ({ className, ...props }: IMenuContent) => (
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content
+      side="bottom"
+      align="start"
+      className={cn(
+        "bg-white border-2 border-black shadow-md absolute top-2 min-w-20",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenu.Portal>
+);
+
+const MenuItem = (props: any) => (
+  <DropdownMenu.Item
+    className="p-2 hover:bg-primary-300 outline-none cursor-pointer "
+    {...props}
+  />
+);
+
+const MenuComponent = Object.assign(Menu, {
+  Trigger,
+  Content,
+  Item: MenuItem,
+});
+
+export { MenuComponent as Menu };

packages/ui/Menu/index.ts

@@ -0,0 +1 @@
+export * from "./Menu";

packages/ui/index.ts

@@ -8,3 +8,4 @@ export * from "./Avatars";
 export * from "./Badges";
 export * from "./Tabs";
 export * from "./Dialog";
+export * from "./Menu";