diff --git a/apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss b/apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss
index fa477c337..ce57bb3da 100644
--- a/apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss
+++ b/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 {
diff --git a/apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx b/apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx
index 9181871fd..2c97fb107 100644
--- a/apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx
+++ b/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 ;
}
return (
-
+
{item.icon && }
{item.label}