Extract list card avatar

src/modules/chapter/components/cards/ChapterCardThumbnail.tsx

@@ -7,12 +7,11 @@
  */
 
 import { Link } from 'react-router-dom';
-import Avatar from '@mui/material/Avatar';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
-import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
 import { MangaIdInfo, MangaThumbnailInfo } from '@/modules/manga/Manga.types.ts';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
+import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
 
 export const ChapterCardThumbnail = ({
     mangaId,
@@ -24,27 +23,10 @@ export const ChapterCardThumbnail = ({
     mangaTitle: MangaType['title'];
 }) => (
     <Link to={AppRoutes.manga.path(mangaId)} style={{ textDecoration: 'none' }}>
-        <Avatar
-            variant="rounded"
-            sx={{
-                width: 56,
-                height: 56,
-                flex: '0 0 auto',
-                marginRight: 1,
-                background: 'transparent',
-            }}
-        >
-            <SpinnerImage
-                imgStyle={{
-                    objectFit: 'cover',
-                    width: '100%',
-                    height: '100%',
-                    imageRendering: 'pixelated',
-                }}
-                spinnerStyle={{ small: true }}
-                alt={mangaTitle}
-                src={Mangas.getThumbnailUrl({ thumbnailUrl, thumbnailUrlLastFetched })}
-            />
-        </Avatar>
+        <ListCardAvatar
+            iconUrl={Mangas.getThumbnailUrl({ thumbnailUrl, thumbnailUrlLastFetched })}
+            alt={mangaTitle}
+            slots={{ spinnerImageProps: { imgStyle: { imageRendering: 'pixelated' } } }}
+        />
     </Link>
 );