added menu examples

Author: ariflogs

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

@@ -106,11 +106,6 @@ export default function page() {
           <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>

config/components.ts

@@ -26,14 +26,19 @@ export const componentConfig = {
       name: "card",
       filePath: "packages/ui/Cards/Card.tsx",
     },
-    text: {
-      name: "text",
-      filePath: "packages/ui/Text/Text.tsx",
-    },
+
     dialog: {
       name: "dialog",
       filePath: "packages/ui/Dialog/Dialog.tsx",
     },
+    menu: {
+      name: "menu",
+      filePath: "packages/ui/Menu/Menu.tsx",
+    },
+    text: {
+      name: "text",
+      filePath: "packages/ui/Text/Text.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -134,6 +139,11 @@ export const componentConfig = {
       filePath: "preview/components/input-style-default.tsx",
       preview: lazy(() => import("@/preview/components/input-style-default")),
     },
+    "menu-style-default": {
+      name: "menu-style-default",
+      filePath: "preview/components/menu-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/menu-style-default")),
+    },
     "textarea-style-default": {
       name: "textarea-style-default",
       filePath: "preview/components/textarea-style-default.tsx",

config/navigation.ts

@@ -22,11 +22,12 @@ export const navConfig: INavigationConfig = {
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
+        { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
+        { title: "Menu", href: `${componentsRoute}/menu` },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },
-        { title: "Dialog", href: `${componentsRoute}/dialog` },
       ],
     },
     {

content/docs/components/menu.mdx

@@ -0,0 +1,35 @@
+---
+title: Menu
+description: Show your users a list of actions they can take. 📋
+lastUpdated: 19 Oct, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Menu/Menu.tsx
+---
+
+<ComponentShowcase name="menu-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-dropdown-menu
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="menu" />
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="menu-style-default" />

packages/ui/Menu/Menu.tsx

@@ -27,7 +27,7 @@ const Content = ({ className, ...props }: IMenuContent) => (
 
 const MenuItem = (props: any) => (
   <DropdownMenu.Item
-    className="p-2 hover:bg-primary-300 outline-none cursor-pointer "
+    className="p-2 hover:bg-primary-400 outline-none cursor-pointer "
     {...props}
   />
 );

preview/components/menu-style-default.tsx

@@ -0,0 +1,16 @@
+import { Button, Menu } from "@/packages/ui";
+
+export default function MenuDefault() {
+  return (
+    <Menu>
+      <Menu.Trigger asChild>
+        <Button>Menu</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>
+  );
+}