Minor fixes

Added Keyboard navigation
Added 2024 Tag

Author: DerCed

src/components/Gallery/GalleryDialog/GalleryDialog.jsx

@@ -2,16 +2,19 @@ import {
     AppBar,
     Box,
     CardActionArea,
-    Container, Dialog,
+    Container,
+    Dialog,
     Grid,
     IconButton,
-    Paper, Slide,
+    Paper,
+    Slide,
     Stack,
     Toolbar,
-    Typography, useMediaQuery
+    Typography,
+    useMediaQuery
 } from "@mui/material";
 import {Close, KeyboardArrowLeft, KeyboardArrowRight} from "@mui/icons-material";
-import React, {useState} from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import images from "../../../assets/images/event/Images";
 
 const Transition = React.forwardRef(function Transition(
@@ -28,28 +31,62 @@ export function GalleryDialog(props) {
     const [selectedImage, setSelectedImage] = useState(0)
     const isMobile = useMediaQuery((theme) => theme.breakpoints.down('md'));
 
+
+    const handleKeyboardInput = useCallback((event) => {
+        if (event?.key === "ArrowRight") {
+            nextImage()
+        }
+        if (event?.key === "ArrowLeft") {
+            previousImage()
+        }
+    }, [])
+
+    const nextImage = () => {
+        setNewImage(selectedImage => {
+            return ((selectedImage + 1) % images[galleryTab].items.length)
+        })
+    };
+    const previousImage = () => {
+        setNewImage(selectedImage => {
+            return ((((selectedImage - 1) % images[galleryTab].items.length) + images[galleryTab].items.length) % images[galleryTab].items.length)
+        })
+    };
+
+
+    useEffect(() => {
+        document.addEventListener("keydown", handleKeyboardInput, false);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyboardInput, false);
+        };
+    }, [handleKeyboardInput()]);
+
     function setNewImage(index) {
-        scrollImageIntoView(index)
         setSelectedImage(index)
     }
+
+    useEffect(() => {
+        scrollImageIntoView(selectedImage)
+    }, [selectedImage]);
+
     function scrollImageIntoView(index) {
         const element = document.getElementById("img-" + index);
         if (!element) {
-            console.error("could not find element", "img-" + index, element)
+            console.warn("could not find element", "img-" + index, element)
             return
         }
         element.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'})
-
     }
 
-    return(
+    return (
         <Dialog
             fullScreen
             open={props.isOpen}
             onClose={props.onClose}
             TransitionComponent={Transition}
         >
-            <Box sx={{flexDirection: "column", height: "100vh !important", width: "100vw"}}>
+            <Box sx={{flexDirection: "column", height: "100vh !important", width: "100vw"}}
+                 onKeyDown={(e) => console.log("KEYDOWN", e)}>
                 <AppBar sx={{position: 'absolute'}}>
                     <Toolbar>
                         <Typography sx={{ml: 2, flex: 1}} variant="h6" component="div">
@@ -155,15 +192,15 @@ export function GalleryDialog(props) {
                                                 sx={{
                                                     background: "rgba(19,16,27,0.4)",
                                                 }}
-                                                onClick={() => setNewImage((((selectedImage - 1) % images[galleryTab].items.length) + images[galleryTab].items.length) % images[galleryTab].items.length)}
+                                                onClick={previousImage}
                                             >
                                                 <KeyboardArrowLeft fontSize={"large"} sx={{color: "#fff"}}/>
                                             </IconButton>
                                             <IconButton
                                                 sx={{
                                                     background: "rgba(19,16,27,0.4)",
                                                 }}
-                                                onClick={() => setNewImage((selectedImage + 1) % images[galleryTab].items.length)}
+                                                onClick={nextImage}
                                             >
                                                 <KeyboardArrowRight fontSize={"large"} sx={{color: "#fff"}}/>
                                             </IconButton>

src/components/Jury/Jury.jsx

@@ -1,5 +1,5 @@
 "use client"
-import {Box, Container, Grid, Paper, Stack, Typography, useTheme} from "@mui/material";
+import {Box, Chip, Container, Grid, Paper, Stack, Typography, useTheme} from "@mui/material";
 import SebastianUlm from "../../assets/images/jury/SebastianUlm.jpg"
 import HolgerRhinow from "../../assets/images/jury/HolgerRhinow.png"
 import FlorianBreipohl from "../../assets/images/jury/FlorianBreipohl.jpeg"
@@ -39,7 +39,10 @@ function Jury() {
     const theme = useTheme();
     return (
         <Container sx={{paddingBottom: 10, paddingTop: 10}}>
+            <Box sx={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
             <Typography variant={"h2"} gutterBottom>Jury</Typography>
+            <Chip label={"2024"}/>
+        </Box>
             <Grid container spacing={10}>
                 <Grid item xs={12} md={12}>
                     <Stack spacing={3}>

src/components/Speakers/Speakers.jsx

@@ -1,5 +1,5 @@
 "use client"
-import {Box, Container, Grid, Paper, Stack, Typography, useTheme} from "@mui/material";
+import {Box, Chip, Container, Grid, Paper, Stack, Typography, useTheme} from "@mui/material";
 import FelixLennardHake from "../../assets/images/speakers/FelixLennardHake.jpg"
 import {WindowCard} from "../WindowCard/WindowCard";
 
@@ -19,7 +19,10 @@ function Speakers() {
     const theme = useTheme();
     return (
         <Container sx={{paddingBottom: 10, paddingTop: 10}}>
-            <Typography variant={"h2"} gutterBottom>Speaker</Typography>
+            <Box sx={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+                <Typography variant={"h2"} gutterBottom>Speaker</Typography>
+                <Chip label={"2024"}/>
+            </Box>
             <Grid container spacing={10}>
                 <Grid item xs={12} md={12}>
                     <Stack spacing={3}>

src/components/TimeTable/TimeTable.jsx

@@ -1,4 +1,4 @@
-import {Box, Card, Container, Divider, Grid, Stack, Typography} from "@mui/material";
+import {Box, Card, Chip, Container, Divider, Grid, Stack, Typography} from "@mui/material";
 import {
     Campaign,
     Celebration,
@@ -170,8 +170,10 @@ export function TimeTable() {
 
     return (
         <Container sx={{paddingBottom: 10, paddingTop: 10}}>
-            <Typography variant={"h2"} component={"h1"} gutterBottom>Time Table</Typography>
-
+            <Box sx={{display: "flex", justifyContent: "space-between", alignItems: "center"}}>
+            <Typography variant={"h2"} gutterBottom>Time Table</Typography>
+            <Chip label={"2024"}/>
+        </Box>
             <Grid container spacing={5}>
                 <Grid item md={6} xs={12}>
                     <Table data={dayOne} title={"Day 1"} subtitle={"Friday 05.04"}/>