refactor MangaCard

src/components/util/SpinnerImage.tsx

@@ -5,8 +5,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, CSSProperties } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/system/Box';
+import { Theme } from '@mui/system/createTheme';
+import { SxProps } from '@mui/system/styleFunctionSx';
 
 interface IProps {
     src: string
@@ -15,14 +18,16 @@ interface IProps {
     imgRef?: React.RefObject<HTMLImageElement>
 
     spinnerClassName?: string
+    spinnerStyle?: SxProps<Theme>
     imgClassName?: string
+    imgStyle?: CSSProperties
 
     onImageLoad?: () => void
 }
 
 export default function SpinnerImage(props: IProps) {
     const {
-        src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName,
+        src, alt, onImageLoad, imgRef, spinnerClassName, imgClassName, spinnerStyle, imgStyle,
     } = props;
     const [imageSrc, setImagsrc] = useState<string>('');
 
@@ -48,19 +53,20 @@ export default function SpinnerImage(props: IProps) {
 
     if (imageSrc.length === 0) {
         return (
-            <div className={spinnerClassName}>
+            <Box className={spinnerClassName} sx={spinnerStyle}>
                 <CircularProgress thickness={5} />
-            </div>
+            </Box>
         );
     }
 
     if (imageSrc === 'Not Found') {
-        return <div className={spinnerClassName} />;
+        return <Box className={spinnerClassName} sx={spinnerStyle} />;
     }
 
     return (
         <img
             className={imgClassName}
+            style={imgStyle}
             ref={imgRef}
             src={imageSrc}
             alt={alt}
@@ -71,6 +77,8 @@ export default function SpinnerImage(props: IProps) {
 SpinnerImage.defaultProps = {
     spinnerClassName: '',
     imgClassName: '',
+    spinnerStyle: {},
+    imgStyle: {},
     onImageLoad: () => {},
     imgRef: undefined,
 };