first commit

resources/client/admin/channels/channel-content-item-image.tsx

@@ -0,0 +1,24 @@
+import {NormalizedModel} from '@common/datatable/filters/normalized-model';
+import {useImageSrc} from '@app/images/use-image-src';
+import clsx from 'clsx';
+import {ImageIcon} from '@common/icons/material/Image';
+
+interface Props {
+  item: NormalizedModel;
+}
+export function ChannelContentItemImage({item}: Props) {
+  const src = useImageSrc(item.image, {size: 'sm'});
+
+  const imageClassName = clsx(
+    'aspect-square w-40 rounded object-cover',
+    !src ? 'flex items-center justify-center' : 'block',
+  );
+
+  return src ? (
+    <img className={imageClassName} src={src} alt="" />
+  ) : (
+    <span className={imageClassName}>
+      <ImageIcon className="max-w-[60%] text-divider" size="text-6xl" />
+    </span>
+  );
+}