feat(delete): add delelte action

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>

Author: sudhanshutech

src/custom/CatalogDetail/ActionButton.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import { CircularProgress } from '../../base';
-import { CopyIcon, EditIcon, KanvasIcon, PublishIcon, ShareLineIcon } from '../../icons';
+import {
+  CopyIcon,
+  DeleteIcon,
+  EditIcon,
+  KanvasIcon,
+  PublishIcon,
+  ShareLineIcon
+} from '../../icons';
 import Download from '../../icons/Download/Download';
 import { charcoal, useTheme } from '../../theme';
 import { Pattern } from '../CustomCatalog/CustomCard';
@@ -23,6 +30,8 @@ interface ActionButtonsProps {
   handleInfoClick?: () => void;
   showShareAction?: boolean;
   handleShare: () => void;
+  showDeleteAction?: boolean;
+  handleDelete: () => void;
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({
@@ -39,7 +48,9 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
   showInfoAction,
   handleInfoClick,
   showShareAction,
-  handleShare
+  handleShare,
+  showDeleteAction,
+  handleDelete
 }) => {
   const cleanedType = type.replace('my-', '').replace(/s$/, '');
   const theme = useTheme();
@@ -155,7 +166,20 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             Share
           </ActionButton>
         )}
+        {showDeleteAction && (
+          <UnpublishAction
+            sx={{
+              borderRadius: '0.2rem',
+              gap: '10px'
+            }}
+            onClick={handleDelete}
+          >
+            <DeleteIcon width={24} height={24} fill={charcoal[100]} />
+            Delete
+          </UnpublishAction>
+        )}
       </div>
+
       {showUnpublishAction && (
         <UnpublishAction
           sx={{

src/custom/CatalogDetail/LeftPanel.tsx

@@ -27,6 +27,8 @@ interface LeftPanelProps {
   handleInfoClick?: () => void;
   showShareAction?: boolean;
   handleShare: () => void;
+  showDeleteAction?: boolean;
+  handleDelete: () => void;
 }
 
 const LeftPanel: React.FC<LeftPanelProps> = ({
@@ -48,7 +50,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
   showInfoAction = false,
   handleInfoClick,
   showShareAction = false,
-  handleShare
+  handleShare,
+  showDeleteAction = false,
+  handleDelete
 }) => {
   const theme = useTheme();
 
@@ -95,6 +99,8 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
         handleInfoClick={handleInfoClick}
         showShareAction={showShareAction}
         handleShare={handleShare}
+        showDeleteAction={showDeleteAction}
+        handleDelete={handleDelete}
       />
       {showTechnologies && (
         <TechnologySection