add delete option for media to /article/show page

src/pages/article/show.tsx

@@ -1,4 +1,4 @@
-import {Stack, Typography, Box, Grid2 as Grid} from '@mui/material'
+import {Stack, Typography, Box, Grid2 as Grid, Button} from '@mui/material'
 import {useShow} from '@refinedev/core'
 import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
 
@@ -30,6 +30,19 @@ export const ArticleShow = () => {
     }
   }, [record?.id])
 
+  const deleteMedia = (mediaId: string) => {
+    axios
+      .delete(`${BACKEND_URL}/article/${record?.id}/media`, {
+        data: {media_id: mediaId},
+      })
+      .then(() => {
+        setMedia((prevMedia) => prevMedia.filter((item) => item.id !== mediaId))
+      })
+      .catch((error) => {
+        console.error('Error deleting media:', error)
+      })
+  }
+
   const fields = [
     {label: 'ID', data: 'id'},
     {label: 'Heading', data: 'heading'},
@@ -93,6 +106,10 @@ export const ArticleShow = () => {
                         <strong>{label}:</strong> {mediaItem?.[data]}
                       </Typography>
                     ))}
+
+                    <Button variant="outlined" color="error" onClick={() => deleteMedia(mediaItem?.id)} sx={{mt: 2}}>
+                      Delete
+                    </Button>
                   </Stack>
                 </Box>
               ))