Add new items to media gallery

createMediaData.mjs

@@ -9,7 +9,6 @@ async function getImages(dir) {
         return {
           name: file.substr(0, file.lastIndexOf('.')),
           source: `${dir.split('/')[1]}/${file}`,
-          description: file.substr(0, file.lastIndexOf('.')),
         }
       })
 
@@ -20,11 +19,7 @@ async function getImages(dir) {
 }
 
 export async function createData() {
-  const mediaDataHome = await getImages('public/protestart')
-  const mediaDataPoster = await getImages('public/posterParade')
-  const mediaDataChat = await getImages('public/chat')
-  const mediaData = mediaDataHome.concat(mediaDataPoster.concat(mediaDataChat))
-
+  const mediaData = await getImages('public/mediadata')
   const mediaDataFile = `export const mediaData = ${JSON.stringify(mediaData, null, 2)};`
   const mediaDataFilePath = 'src/config/mediaData.tsx'
   await fs.writeFile(mediaDataFilePath, mediaDataFile, 'utf-8')

src/components/MediaGallery.tsx

@@ -1,11 +1,19 @@
 /* eslint-disable @next/next/no-img-element */
 import Masonry from '@mui/lab/Masonry'
+import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import { protestart } from 'config'
 import { mediaData } from 'config/mediaData'
 import { useState } from 'react'
 import { MediaDialog } from 'services/MediaDialog'
 
+import useStore from 'utils/store'
+import { useHasHydrated } from 'utils/useHasHydrated'
+
 export const MediaGallery = () => {
+  const hasHydrated = useHasHydrated()
+  const { language } = useStore()
   const [open, setOpen] = useState(false)
   const [selectedItem, setSelectedItem] = useState(null)
 
@@ -20,7 +28,15 @@ export const MediaGallery = () => {
   }
   return (
     <div>
-      <Masonry columns={{ xs: 1, sm: 2, md: 3 }} spacing={{ xs: 1, sm: 2, md: 3 }} sx={{ pt: 2 }}>
+      <Box my="2rem" alignItems="center" textAlign="center" justifyContent="center">
+        <Typography sx={{ mb: 4 }} variant="h2" color="secondary.main">
+          {hasHydrated && protestart[language].title}
+        </Typography>
+        <Typography sx={{ my: 4 }} component="h3" variant="h4" color="secondary.main">
+          {hasHydrated && protestart[language].description}
+        </Typography>
+      </Box>
+      <Masonry columns={{ xs: 1, sm: 2, md: 4 }} spacing={2} defaultHeight={450} defaultColumns={4} defaultSpacing={2}>
         {mediaData.map((item, index) => (
           <Button
             key={index}

src/config/index.tsx

@@ -73,6 +73,17 @@ export const startTheDemo = {
   },
 }
 
+export const protestart = {
+  de: {
+    title: 'Mediensammlung',
+    description: 'Mediensammlung',
+  },
+  en: {
+    title: 'Protest Art',
+    description: 'EN Protest Art',
+  },
+}
+
 export const sloganGenerator = {
   de: {
     slogan: 'Drücke den roten Hebel!',

src/config/mediaData.tsx

@@ -1,137 +1,134 @@
 export const mediaData = [
   {
-    name: '7_231_DGB Demo zu Frauenarbeitslosigkeit_Hamburg_1978_Fotograf',
-    source: 'protestart/7_231_DGB Demo zu Frauenarbeitslosigkeit_Hamburg_1978_Fotograf.webp',
-    description: '7_231_DGB Demo zu Frauenarbeitslosigkeit_Hamburg_1978_Fotograf',
+    name: '02-1517_Demonstration 1930 Arbeitereltern unterstützt den Schulstreik in Neukölln',
+    source: 'mediadata/02-1517_Demonstration 1930 Arbeitereltern unterstützt den Schulstreik in Neukölln.webp',
   },
   {
-    name: '7_246 (24)',
-    source: 'protestart/7_246 (24).webp',
-    description: '7_246 (24)',
+    name: '07_231',
+    source: 'mediadata/07_231.webp',
   },
   {
-    name: '7_75_Antimilitarismus_Demo',
-    source: 'protestart/7_75_Antimilitarismus_Demo.webp',
-    description: '7_75_Antimilitarismus_Demo',
+    name: '07_246',
+    source: 'mediadata/07_246.webp',
   },
   {
-    name: '9_52_Demo gegen NPD_Polizei_1986_Ciesla',
-    source: 'protestart/9_52_Demo gegen NPD_Polizei_1986_Ciesla.webp',
-    description: '9_52_Demo gegen NPD_Polizei_1986_Ciesla',
+    name: '07_75',
+    source: 'mediadata/07_75.webp',
   },
   {
-    name: 'Aufkleber_130',
-    source: 'protestart/Aufkleber_130.webp',
-    description: 'Aufkleber_130',
+    name: '07_75_',
+    source: 'mediadata/07_75_.webp',
   },
   {
-    name: 'Aufkleber_138',
-    source: 'protestart/Aufkleber_138.webp',
-    description: 'Aufkleber_138',
+    name: '7_334_SJD-Demo_Dortmund 1976_Wir fordern freie Jugendzentren_Kein Fotograf_Farbfoto',
+    source: 'mediadata/7_334_SJD-Demo_Dortmund 1976_Wir fordern freie Jugendzentren_Kein Fotograf_Farbfoto.webp',
   },
   {
-    name: 'Aufkleber_449',
-    source: 'protestart/Aufkleber_449.webp',
-    description: 'Aufkleber_449',
+    name: '8_29_SJD_Herne_1981_Ohne Fotograf_Kinder mit farbeimer',
+    source: 'mediadata/8_29_SJD_Herne_1981_Ohne Fotograf_Kinder mit farbeimer.webp',
   },
   {
-    name: 'Dortmund_1975',
-    source: 'protestart/Dortmund_1975.webp',
-    description: 'Dortmund_1975',
+    name: 'Aufkleber_155',
+    source: 'mediadata/Aufkleber_155.webp',
   },
   {
-    name: 'PK 238_1',
-    source: 'protestart/PK 238_1.webp',
-    description: 'PK 238_1',
+    name: 'Aufkleber_279',
+    source: 'mediadata/Aufkleber_279.webp',
   },
   {
-    name: 'PK_171_1',
-    source: 'protestart/PK_171_1.webp',
-    description: 'PK_171_1',
+    name: 'Aufkleber_307',
+    source: 'mediadata/Aufkleber_307.webp',
   },
   {
-    name: 'PL-C 1202',
-    source: 'protestart/PL-C 1202.webp',
-    description: 'PL-C 1202',
+    name: 'Aufkleber_445',
+    source: 'mediadata/Aufkleber_445.webp',
   },
   {
-    name: 'PL_B_175',
-    source: 'protestart/PL_B_175.webp',
-    description: 'PL_B_175',
+    name: 'Aufkleber_45',
+    source: 'mediadata/Aufkleber_45.webp',
   },
   {
-    name: 'antifascism',
-    source: 'posterParade/antifascism.webp',
-    description: 'antifascism',
+    name: 'Aufkleber_54',
+    source: 'mediadata/Aufkleber_54.webp',
   },
   {
-    name: 'antifascism2',
-    source: 'posterParade/antifascism2.webp',
-    description: 'antifascism2',
+    name: 'FL 592',
+    source: 'mediadata/FL 592.webp',
   },
   {
-    name: 'antirascism',
-    source: 'posterParade/antirascism.webp',
-    description: 'antirascism',
+    name: 'Kleinformate 58 (Anstecknadel)',
+    source: 'mediadata/Kleinformate 58 (Anstecknadel).webp',
   },
   {
-    name: 'democracy',
-    source: 'posterParade/democracy.webp',
-    description: 'democracy',
+    name: 'Kleinformate_233',
+    source: 'mediadata/Kleinformate_233.webp',
   },
   {
-    name: 'environment',
-    source: 'posterParade/environment.webp',
-    description: 'environment',
+    name: 'Kleinformate_534',
+    source: 'mediadata/Kleinformate_534.webp',
   },
   {
-    name: 'peace',
-    source: 'posterParade/peace.webp',
-    description: 'peace',
+    name: 'Kleinformate_544',
+    source: 'mediadata/Kleinformate_544.webp',
   },
   {
-    name: 'peace2',
-    source: 'posterParade/peace2.webp',
-    description: 'peace2',
+    name: 'Museales 51',
+    source: 'mediadata/Museales 51.webp',
   },
   {
-    name: 'peace3',
-    source: 'posterParade/peace3.webp',
-    description: 'peace3',
+    name: 'PK 366',
+    source: 'mediadata/PK 366.webp',
   },
   {
-    name: 'solidarity',
-    source: 'posterParade/solidarity.webp',
-    description: 'solidarity',
+    name: 'PK 524_1',
+    source: 'mediadata/PK 524_1.webp',
   },
   {
-    name: 'solidarity2',
-    source: 'posterParade/solidarity2.webp',
-    description: 'solidarity2',
+    name: 'PK 69',
+    source: 'mediadata/PK 69.webp',
   },
   {
-    name: 'youth',
-    source: 'posterParade/youth.webp',
-    description: 'youth',
+    name: 'PK 793_1',
+    source: 'mediadata/PK 793_1.webp',
   },
   {
-    name: 'youth2',
-    source: 'posterParade/youth2.webp',
-    description: 'youth2',
+    name: 'PK 814_1',
+    source: 'mediadata/PK 814_1.webp',
   },
   {
-    name: 'youth3',
-    source: 'posterParade/youth3.webp',
-    description: 'youth3',
+    name: 'PK_944_1',
+    source: 'mediadata/PK_944_1.webp',
   },
   {
-    name: '1928',
-    source: 'chat/1928.webp',
-    description: '1928',
+    name: 'PL-A 188',
+    source: 'mediadata/PL-A 188.webp',
   },
   {
-    name: '1983',
-    source: 'chat/1983.webp',
-    description: '1983',
+    name: 'PL-C 1123',
+    source: 'mediadata/PL-C 1123.webp',
+  },
+  {
+    name: 'PL-C 1202_zuklein',
+    source: 'mediadata/PL-C 1202_zuklein.webp',
+  },
+  {
+    name: 'PL-C 1401',
+    source: 'mediadata/PL-C 1401.webp',
+  },
+  {
+    name: 'PL_B_126',
+    source: 'mediadata/PL_B_126.webp',
+  },
+  {
+    name: 'PL_C_623',
+    source: 'mediadata/PL_C_623.webp',
+  },
+  {
+    name: 'PL_C_751',
+    source: 'mediadata/PL_C_751.webp',
+  },
+  {
+    name: 'ZA_1148_1993_4',
+    source: 'mediadata/ZA_1148_1993_4.webp',
   },
 ]

src/services/MediaDialog.tsx

@@ -1,6 +1,5 @@
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
-import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
 import Image from 'next/image'
 
@@ -13,7 +12,6 @@ export function MediaDialog({ onClose, selectedItem, open }) {
     <Dialog onClose={handleClose} aria-labelledby="dialog" open={open} maxWidth="md">
       <DialogTitle id="dialog-title">{selectedItem.name}</DialogTitle>
       <DialogContent>
-        <DialogContentText>{selectedItem.description}</DialogContentText>
         <Image
           src={selectedItem.source}
           alt={selectedItem.name}