Create events add image title in graphic page

frontend/src/Components/ImagePicker/ImagePicker.module.scss

@@ -37,35 +37,31 @@
   max-height: 25em;
   overflow-y: scroll;
   display: flex;
-  flex-direction: row;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: flex-start;
   flex-wrap: wrap;
-  gap: 0.5em;
-  margin: 0 auto;
+  gap: 1em;
+  margin-top: 1em;
+
+  @include for-tablet-up {
+    flex-direction: row;
+  }
 }
 
-.image {
-  @include rounded;
-  @include shadow-light;
-  width: 10em;
-  height: 8em;
-  background-color: $grey-1;
-  background-size: cover;
-  background-position: center;
-  border: 3px solid transparent;
-  transition: 0.2s;
-  transform: scale(0.9);
-  cursor: pointer;
+.image_box {
+  overflow: hidden;
+  flex-basis: calc(25% - 1em);
+  min-height: 12em;
+  height: 12em;
+  box-sizing: inherit;
 
-  &:hover {
-    filter: brightness(110%);
+  @include for-tablet-down {
+    flex-basis: calc(33.33% - 1em);
   }
+}
 
-  &.selected_image {
-    box-shadow: 0 0 25px 5px rgba(143, 181, 238, 0.625);
-    border: 3px solid $blue;
-    transform: scale(1);
-  }
+.image_box_selected {
+  border: none;
 }
 
 .search_wrapper {

frontend/src/Components/ImagePicker/ImagePicker.tsx

@@ -1,8 +1,8 @@
 import { Icon } from '@iconify/react';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import classNames from 'classnames';
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ImageTile } from '~/Components/ImageTile';
 import { getImagesPaginated } from '~/api';
 import { BACKEND_DOMAIN } from '~/constants';
 import type { ImageDto } from '~/dto';
@@ -62,12 +62,13 @@ export function ImagePicker({ onSelected, selectedImage }: ImagePickerProps) {
   function renderImage(image: ImageDto): ReactNode {
     const isSelected = selected?.id === image.id;
     return (
-      <button
-        type="button"
+      <ImageTile
         key={image.id}
-        className={classNames(styles.image, isSelected && styles.selected_image)}
+        image={image}
+        className={styles.image_box}
+        selected={isSelected}
+        selectedClassName={styles.image_box_selected}
         onClick={() => select(image)}
-        style={backgroundImageFromUrl(BACKEND_DOMAIN + image.url)}
       />
     );
   }

frontend/src/Components/ImageTile/ImageTile.module.scss

@@ -0,0 +1,53 @@
+@use 'src/constants' as *;
+
+@use 'src/mixins' as *;
+
+.imageContainer {
+  @include rounded;
+  @include shadow-light;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  transition: 0.2s;
+  border: none;
+
+  &:hover {
+    transform: scale(1.02);
+  }
+}
+
+.clickable {
+  cursor: pointer;
+  padding: 0;
+  text-align: inherit;
+}
+
+.selected {
+  box-shadow: 0 0 25px 5px rgba(143, 181, 238, 0.625);
+  border: 3px solid $blue;
+  transform: scale(1);
+}
+
+.imageTitle {
+  color: $white;
+  text-align: center;
+  min-height: 2em;
+}
+
+.text {
+  font-size: 1.2em;
+  padding: 0.2em;
+  background-color: $black;
+  text-decoration: none;
+}
+
+.tags {
+  font-size: 0.8em;
+  padding: 0.4em;
+  background-color: $black-t75;
+  text-decoration: none;
+}

frontend/src/Components/ImageTile/ImageTile.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { BACKEND_DOMAIN } from '~/constants';
+import type { ImageDto } from '~/dto';
+import { backgroundImageFromUrl } from '~/utils';
+import styles from './ImageTile.module.scss';
+
+type ImageTileProps = {
+  image: ImageDto;
+  className?: string;
+  selected?: boolean;
+  selectedClassName?: string;
+  onClick?(): void;
+};
+
+function TileContent({ image }: Pick<ImageTileProps, 'image'>) {
+  const imageTags = image.tags.map((tag) => ` ${tag.name}`).toString();
+
+  return (
+    <>
+      <div className={styles.imageTitle}>
+        <p className={styles.text}>{image.title}</p>
+        <p className={styles.tags}>{imageTags}</p>
+      </div>
+    </>
+  );
+}
+
+export function ImageTile({ image, className, selected = false, selectedClassName, onClick }: ImageTileProps) {
+  const tileClassName = classNames(
+    styles.imageContainer,
+    className,
+    selected && styles.selected,
+    selected && selectedClassName,
+    onClick && styles.clickable,
+  );
+
+  if (onClick !== undefined) {
+    return (
+      <button
+        type="button"
+        className={tileClassName}
+        style={backgroundImageFromUrl(BACKEND_DOMAIN + image.url)}
+        onClick={onClick}
+      >
+        <TileContent image={image} />
+      </button>
+    );
+  }
+
+  return (
+    <div className={tileClassName} style={backgroundImageFromUrl(BACKEND_DOMAIN + image.url)}>
+      <TileContent image={image} />
+    </div>
+  );
+}

frontend/src/Components/ImageTile/index.ts

@@ -0,0 +1 @@
+export { ImageTile } from './ImageTile';

frontend/src/Components/index.ts

@@ -34,6 +34,7 @@ export { IconButton } from './IconButton';
 export { Image } from './Image';
 export { ImageCard } from './ImageCard';
 export { ImageList } from './ImageList';
+export { ImageTile } from './ImageTile';
 export { ImageQuery } from './ImageQuery';
 export { Input, type InputProps } from './Input';
 export { InputField } from './InputField';

frontend/src/PagesAdmin/ImageAdminPage/components/AdminImage/AdminImage.tsx

@@ -1,29 +1,11 @@
-import classNames from 'classnames';
-import { BACKEND_DOMAIN } from '~/constants';
+import { ImageTile } from '~/Components';
 import type { ImageDto } from '~/dto';
-import { backgroundImageFromUrl } from '~/utils';
-import styles from './AdminImage.module.scss';
 
 type AdminImageProps = {
   image: ImageDto;
   className?: string;
 };
 
 export function AdminImage({ image, className }: AdminImageProps) {
-  const TAGS = image.tags
-    .map((tag) => {
-      return ` ${tag.name}`;
-    })
-    .toString();
-  return (
-    <div
-      className={classNames(styles.imageContainer, className)}
-      style={backgroundImageFromUrl(BACKEND_DOMAIN + image.url)}
-    >
-      <div className={styles.imageTitle}>
-        <p className={styles.text}>{image.title}</p>
-        <p className={styles.tags}>{TAGS}</p>
-      </div>
-    </div>
-  );
+  return <ImageTile image={image} className={className} />;
 }