feat: added drop-down component

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",

src/components/ui/button/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { type VariantProps } from 'class-variance-authority';
 import { cn } from 'Utils/cn';

src/components/ui/dialog/dialog.test.tsx → src/components/ui/dialog/__test__/dialog.test.tsx

@@ -1,7 +1,15 @@
 import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '.';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '../index';
 
 describe('Dialog', () => {
     it('should render the Dialog component', () => {

src/components/ui/dropdown-menu/index.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import {
+    Root,
+    Trigger,
+    Group,
+    Portal,
+    Sub,
+    SubTrigger,
+    RadioGroup,
+    SubContent,
+    Content,
+    Item,
+    Label,
+    Separator,
+} from '@radix-ui/react-dropdown-menu';
+
+const DropdownMenu = Root;
+const DropdownMenuTrigger = Trigger;
+const DropdownMenuGroup = Group;
+const DropdownMenuPortal = Portal;
+const DropdownMenuSub = Sub;
+const DropdownMenuRadioGroup = RadioGroup;
+
+const DropdownMenuSubTrigger = forwardRef<ElementRef<typeof SubTrigger>, ComponentPropsWithoutRef<typeof SubTrigger>>(
+    ({ children, ...props }, ref) => (
+        <SubTrigger ref={ref} {...props}>
+            {children}
+        </SubTrigger>
+    )
+);
+DropdownMenuSubTrigger.displayName = SubTrigger.displayName;
+
+const DropdownMenuSubContent = forwardRef<ElementRef<typeof SubContent>, ComponentPropsWithoutRef<typeof SubContent>>(
+    (props, ref) => <SubContent ref={ref} {...props} />
+);
+DropdownMenuSubContent.displayName = SubContent.displayName;
+
+const DropdownMenuContent = forwardRef<ElementRef<typeof Content>, ComponentPropsWithoutRef<typeof Content>>(
+    ({ sideOffset = 4, ...props }, ref) => (
+        <Portal>
+            <Content ref={ref} sideOffset={sideOffset} {...props} />
+        </Portal>
+    )
+);
+DropdownMenuContent.displayName = Content.displayName;
+
+const DropdownMenuItem = forwardRef<ElementRef<typeof Item>, ComponentPropsWithoutRef<typeof Item>>((props, ref) => (
+    <Item ref={ref} {...props} />
+));
+DropdownMenuItem.displayName = Item.displayName;
+
+const DropdownMenuLabel = forwardRef<ElementRef<typeof Label>, ComponentPropsWithoutRef<typeof Label>>((props, ref) => (
+    <Label ref={ref} {...props} />
+));
+DropdownMenuLabel.displayName = Label.displayName;
+
+const DropdownMenuSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(
+    (props, ref) => <Separator ref={ref} {...props} />
+);
+DropdownMenuSeparator.displayName = Separator.displayName;
+
+export {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuRadioGroup,
+};