first commit

resources/client/titles/pages/title-page/sections/title-page-image-grid.tsx

@@ -0,0 +1,61 @@
+import {TitleImage} from '@app/titles/models/title-image';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {ImageZoomDialog} from '@common/ui/overlays/dialog/image-zoom-dialog';
+import {ButtonBase} from '@common/ui/buttons/button-base';
+import {useTrans} from '@common/i18n/use-trans';
+import {message} from '@common/i18n/message';
+import {ImageSize, useImageSrc} from '@app/images/use-image-src';
+import {ReactNode} from 'react';
+import {useIsMobileMediaQuery} from '@common/utils/hooks/is-mobile-media-query';
+
+interface Props {
+  images: TitleImage[];
+  count?: number;
+  heading?: ReactNode;
+  srcSize?: ImageSize;
+}
+export function TitlePageImageGrid({images, count, heading, srcSize}: Props) {
+  const isMobile = useIsMobileMediaQuery();
+  const {trans} = useTrans();
+  if (!images?.length) return null;
+
+  if (!count) {
+    count = isMobile ? 6 : 5;
+  }
+
+  return (
+    <div className="mt-48">
+      {heading}
+      <div className="grid grid-cols-3 gap-12 md:grid-cols-5 md:gap-24">
+        {images.slice(0, count).map((image, index) => (
+          <DialogTrigger type="modal" key={image.id}>
+            <ButtonBase
+              aria-label={trans(message('Image :index', {values: {index}}))}
+            >
+              <ImageItem image={image} srcSize={srcSize} />
+            </ButtonBase>
+            <ImageZoomDialog
+              images={images.map(img => img.url)}
+              defaultActiveIndex={index}
+            />
+          </DialogTrigger>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ImageProps {
+  image: TitleImage;
+  srcSize?: ImageSize;
+}
+function ImageItem({image, srcSize = 'md'}: ImageProps) {
+  const src = useImageSrc(image.url, {size: srcSize});
+  return (
+    <img
+      className="aspect-square w-full cursor-pointer rounded object-cover"
+      src={src}
+      alt=""
+    />
+  );
+}