Add BannerImage and AvatarImage components

src/components/content/AvatarImage/AvatarImage.tsx

@@ -0,0 +1,28 @@
+import { type Image as ExpoImage } from 'expo-image';
+import React from 'react';
+
+import DEFAULT_AVATAR from '@/assets/img/default_avatar.png';
+import Image, { type ImageProps } from '@/components/content/Image';
+
+export { ImageFragment as AvatarImageFragment } from '@/components/content/Image';
+
+export type AvatarImageProps = ImageProps & {
+  size: number;
+};
+
+export default React.forwardRef<ExpoImage, AvatarImageProps>(
+  function AvatarImage({ size, style, source, ...props }, ref) {
+    source = source ?? {
+      views: [{ url: DEFAULT_AVATAR, height: 190, width: 190 }],
+      blurhash: 'UNGSJtogKQWB~qof9Zay4:of?GogIpof-okC',
+    };
+    return (
+      <Image
+        ref={ref}
+        source={source}
+        style={[{ width: size, height: size, borderRadius: size / 2 }, style]}
+        {...props}
+      />
+    );
+  }
+);

src/components/content/AvatarImage/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AvatarImage';
+export * from './AvatarImage';

src/components/content/BannerImage/BannerImage.tsx

@@ -0,0 +1,30 @@
+import { type Image as ExpoImage } from 'expo-image';
+import React from 'react';
+import Animated from 'react-native-reanimated';
+
+import DEFAULT_BANNER from '@/assets/img/default_cover.png';
+import Image, { type ImageProps } from '@/components/content/Image';
+
+export { ImageFragment as BannerImageFragment } from '@/components/content/Image';
+
+export type BannerImageProps = ImageProps;
+
+export default Animated.createAnimatedComponent(
+  React.forwardRef<ExpoImage, BannerImageProps>(function BannerImage(
+    { style, source, ...props },
+    ref
+  ) {
+    source = source ?? {
+      views: [{ url: DEFAULT_BANNER, height: 400, width: 1440 }],
+      blurhash: 'c16b#q_M00nD4WQwyaTCio%w%NRQS#nSVu',
+    };
+    return (
+      <Image
+        ref={ref}
+        source={source}
+        style={[{ width: '100%' }, style]}
+        {...props}
+      />
+    );
+  })
+);

src/components/content/BannerImage/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BannerImage';
+export * from './BannerImage';