Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/shared/components/image/image.module.css

@@ -0,0 +1,34 @@
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: var(--theme-image-fit);
+    border-radius: var(--theme-radius-md);
+}
+
+.loader {
+    width: 100%;
+    height: 100%;
+}
+
+.image-container {
+    display: flex;
+    width: 100%;
+    max-height: 100%;
+    aspect-ratio: 1 / 1;
+}
+
+.unloader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    background-color: darken(var(--theme-colors-foreground), 40%);
+    opacity: 0.3;
+}
+
+.skeleton {
+    width: 100%;
+    height: 100%;
+}

src/shared/components/image/image.tsx

@@ -0,0 +1,93 @@
+import type { ImgHTMLAttributes } from 'react';
+
+import clsx from 'clsx';
+import { Img } from 'react-image';
+
+import styles from './image.module.css';
+
+import { Icon } from '/@/shared/components/icon/icon';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+interface ImageContainerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface ImageLoaderProps {
+    className?: string;
+}
+
+interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    containerClassName?: string;
+    includeLoader?: boolean;
+    includeUnloader?: boolean;
+    src: string | string[] | undefined;
+    thumbHash?: string;
+}
+
+interface ImageUnloaderProps {
+    className?: string;
+}
+
+export function Image({
+    className,
+    containerClassName,
+    includeLoader = true,
+    includeUnloader = true,
+    src,
+}: ImageProps) {
+    if (src) {
+        return (
+            <Img
+                className={clsx(styles.image, className)}
+                container={(children) => (
+                    <ImageContainer className={containerClassName}>{children}</ImageContainer>
+                )}
+                loader={
+                    includeLoader ? (
+                        <ImageContainer className={containerClassName}>
+                            <ImageLoader className={className} />
+                        </ImageContainer>
+                    ) : null
+                }
+                loading="eager"
+                src={src}
+                unloader={
+                    includeUnloader ? (
+                        <ImageContainer className={containerClassName}>
+                            <ImageUnloader className={className} />
+                        </ImageContainer>
+                    ) : null
+                }
+            />
+        );
+    }
+
+    return <ImageUnloader />;
+}
+
+function ImageContainer({ children, className }: ImageContainerProps) {
+    return <div className={clsx(styles.imageContainer, className)}>{children}</div>;
+}
+
+function ImageLoader({ className }: ImageLoaderProps) {
+    return (
+        <div className={clsx(styles.loader, className)}>
+            <Skeleton
+                className={clsx(styles.skeleton, className)}
+                enableAnimation={true}
+            />
+        </div>
+    );
+}
+
+function ImageUnloader({ className }: ImageUnloaderProps) {
+    return (
+        <div className={clsx(styles.unloader, className)}>
+            <Icon
+                icon="emptyImage"
+                size="xl"
+            />
+        </div>
+    );
+}