invoice bg cover service

src/pages/blog/BlogList.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye, Trash } from 'iconsax-react'
+import { Add, Eye } from 'iconsax-react'
 import Td from '../../components/Td'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
@@ -9,6 +9,7 @@ import Input from '../../components/Input'
 import { useGetBlogs, useDeleteBlog } from './hooks/useBlogData'
 import { BlogItemType } from './types/BlogTypes'
 import moment from 'moment-jalaali'
+import TrashWithConfrim from '../../components/TrashWithConfrim'
 const BlogList: FC = () => {
 
     const { t } = useTranslation('global')
@@ -116,9 +117,11 @@ const BlogList: FC = () => {
                                         <Td text={''}>
                                             <img src={item.imageUrl} alt={item.title} className='w-20 rounded-lg' />
                                         </Td>
-                                        <Td text={item.title} />
                                         <Td text={''}>
-                                            <p dangerouslySetInnerHTML={{ __html: item.previewContent }}></p>
+                                            <p className='max-w-[150px] truncate'>{item.title}</p>
+                                        </Td>
+                                        <Td text={''}>
+                                            <p className='max-w-[150px] truncate' dangerouslySetInnerHTML={{ __html: item.previewContent }}></p>
                                         </Td>
                                         <Td text={item.category?.title} />
                                         <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
@@ -133,13 +136,16 @@ const BlogList: FC = () => {
                                                 <Link to={Pages.blog.detail + item.id}>
                                                     <Eye size={20} color='#8C90A3' />
                                                 </Link>
-                                                <Trash onClick={() => {
-                                                    deleteBlog.mutate(item.id, {
-                                                        onSuccess: () => {
-                                                            getBlogs.refetch()
-                                                        }
-                                                    })
-                                                }} size={20} color='#8C90A3' />
+                                                <TrashWithConfrim
+                                                    onDelete={() => {
+                                                        deleteBlog.mutate(item.id, {
+                                                            onSuccess: () => {
+                                                                getBlogs.refetch()
+                                                            }
+                                                        })
+                                                    }}
+                                                    isLoading={deleteBlog.isPending}
+                                                />
                                             </div>
                                         </Td>
                                     </tr>