refactor: create destructive menu type

apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss

@@ -27,7 +27,6 @@
   }
 }
 
-
 .item {
   outline: 0;
   cursor: default;
@@ -61,6 +60,13 @@
     border-radius: 3px;
     background-color: $gray-1000;
   }
+
+  &[data-type='destructive'] {
+    color: $red-500;
+    svg {
+      color: $red-500;
+    }
+  }
 }
 
 .separator {

apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx

@@ -6,7 +6,7 @@ import style from './DropdownMenu.module.scss';
 
 type DropdownMenuItemDivider = { type: 'divider' };
 type DropdownMenuItem = {
-  type: 'item';
+  type: 'item' | 'destructive';
   label: string;
   icon?: IconType;
   disabled?: boolean;
@@ -31,7 +31,7 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
                 return <BaseMenu.Separator key={index} className={style.separator} />;
               }
               return (
-                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
+                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled} data-type={item.type}>
                   {item.icon && <item.icon />}
                   {item.label}
                 </BaseMenu.Item>