Skip to content

Commit f9ecb77

Browse files
DerCedDerCed
committed
Updated Gallery
1 parent 72bd7f6 commit f9ecb77

File tree

5 files changed

+253
-469
lines changed

5 files changed

+253
-469
lines changed

‎src/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Speakers from "../components/Speakers/Speakers";
99
import Jury from "../components/Jury/Jury";
1010
import {Features} from "../components/Features/Features";
1111
import LandingImage from "../components/LandingImage/LandingImage";
12-
import {Gallery2} from "../components/Gallery2/Gallery2";
12+
import {Gallery} from "../components/Gallery/Gallery";
1313

1414
export default function Page() {
1515
return (
@@ -19,7 +19,7 @@ export default function Page() {
1919
<WhatToExpect/>
2020
<Features/>
2121
<Sponsors/>
22-
<Gallery2/>
22+
<Gallery/>
2323
<Newsletter/>
2424
{/*<Registration />
2525
<Location />*/}

‎src/assets/images/event/Images.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Images2024 from "./2024/Images2024";
2+
import Images2023 from "./2023/Images2023";
3+
4+
let Images = [
5+
{
6+
name: "2024",
7+
subtitle: "tomorrow's reality, today's vision. smart cities edition.",
8+
items: Images2024
9+
},
10+
{
11+
name: "2023",
12+
subtitle: "about://building-trust-in-digital-state",
13+
items: Images2023
14+
}
15+
]
16+
17+
export default Images

‎src/components/Gallery/Gallery.jsx‎

Lines changed: 52 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,194 +1,63 @@
11
'use client'
2-
import {Box, Container, Grid, ImageList, ImageListItem, Tab, Tabs, Typography} from "@mui/material";
2+
import {Box, Button, Container} from "@mui/material";
33
import React, {useState} from "react";
4-
import DSC02572 from '../../assets/images/event/DSC02572_1920.webp'
5-
import DSC02594 from '../../assets/images/event/DSC02594_1920.webp'
6-
import DSC02601 from '../../assets/images/event/DSC02601_1920.webp'
7-
import DSC02604 from '../../assets/images/event/DSC02604_1920.webp'
8-
import DSC02609 from '../../assets/images/event/DSC02609_1920.webp'
9-
import DSC02617 from '../../assets/images/event/DSC02617_1920.webp'
10-
import DSC02619 from '../../assets/images/event/DSC02619_1920.webp'
11-
import DSC02630 from '../../assets/images/event/DSC02630_1920.webp'
12-
import DSC02632 from '../../assets/images/event/DSC02632_1920.webp'
13-
import DSC02635 from '../../assets/images/event/DSC02635_1920.webp'
14-
import DSC02638 from '../../assets/images/event/DSC02638_1920.webp'
15-
import DSC02639 from '../../assets/images/event/DSC02639_1920.webp'
16-
import DSC02643 from '../../assets/images/event/DSC02643_1920.webp'
17-
import DSC02645 from '../../assets/images/event/DSC02645_1920.webp'
18-
import DSC02646 from '../../assets/images/event/DSC02646_1920.webp'
19-
import DSC02659 from '../../assets/images/event/DSC02659_1920.webp'
20-
import DSC02677 from '../../assets/images/event/DSC02677_1920.webp'
21-
import DSC02680 from '../../assets/images/event/DSC02680_1920.webp'
22-
import DSC02762 from '../../assets/images/event/DSC02762_1920.webp'
23-
import DSC02810 from '../../assets/images/event/DSC02810_1920.webp'
24-
import DSC02820 from '../../assets/images/event/DSC02820_1920.webp'
25-
import DSC02823 from '../../assets/images/event/DSC02823_1920.webp'
26-
import DSC02824 from '../../assets/images/event/DSC02824_1920.webp'
27-
import DSC02830 from '../../assets/images/event/DSC02830_1920.webp'
28-
import DSC02868 from '../../assets/images/event/DSC02868_1920.webp'
29-
import DSC02870 from '../../assets/images/event/DSC02870_1920.webp'
30-
import DSC02872 from '../../assets/images/event/DSC02872_1920.webp'
31-
import DSC02876 from '../../assets/images/event/DSC02876_1920.webp'
32-
import DSC02879 from '../../assets/images/event/DSC02879_1920.webp'
33-
import DSC02886 from '../../assets/images/event/DSC02886_1920.webp'
34-
import DSC02889 from '../../assets/images/event/DSC02889_1920.webp'
35-
import DSC02903 from '../../assets/images/event/DSC02903_1920.webp'
36-
import DSC02908 from '../../assets/images/event/DSC02908_1920.webp'
37-
import DSC02914 from '../../assets/images/event/DSC02914_1920.webp'
38-
import DSC02919 from '../../assets/images/event/DSC02919_1920.webp'
39-
import DSC02920 from '../../assets/images/event/DSC02920_1920.webp'
40-
import DSC02923 from '../../assets/images/event/DSC02923_1920.webp'
41-
import DSC02926 from '../../assets/images/event/DSC02926_1920.webp'
42-
import DSC02928 from '../../assets/images/event/DSC02928_1920.webp'
43-
import DSC02931 from '../../assets/images/event/DSC02931_1920.webp'
44-
import DSC02941 from '../../assets/images/event/DSC02941_1920.webp'
45-
import DSC02946 from '../../assets/images/event/DSC02946_1920.webp'
46-
import DSC02949 from '../../assets/images/event/DSC02949_1920.webp'
47-
import DSC02957 from '../../assets/images/event/DSC02957_1920.webp'
48-
import DSC02962 from '../../assets/images/event/DSC02962_1920.webp'
49-
import DSC02969 from '../../assets/images/event/DSC02969_1920.webp'
50-
import DSC02974 from '../../assets/images/event/DSC02974_1920.webp'
51-
import DSC02983 from '../../assets/images/event/DSC02983_1920.webp'
52-
import DSC02992 from '../../assets/images/event/DSC02992_1920.webp'
53-
import DSC02998 from '../../assets/images/event/DSC02998_1920.webp'
54-
import DSC03006 from '../../assets/images/event/DSC03006_1920.webp'
55-
import DSC03022 from '../../assets/images/event/DSC03022_1920.webp'
56-
import DSC03032 from '../../assets/images/event/DSC03032_1920.webp'
57-
58-
function CustomTabPanel(props) {
59-
const { children, value, index, ...other } = props;
60-
61-
return (
62-
<div
63-
role="tabpanel"
64-
hidden={value !== index}
65-
id={`simple-tabpanel-${index}`}
66-
aria-labelledby={`simple-tab-${index}`}
67-
{...other}
68-
>
69-
{value === index && children}
70-
</div>
71-
);
72-
}
73-
74-
function a11yProps(index) {
75-
return {
76-
id: `simple-tab-${index}`,
77-
'aria-controls': `simple-tabpanel-${index}`,
78-
};
79-
}
80-
81-
82-
let images = {
83-
name: "2023",
84-
subtitle: "about://building-trust-in-digital-state",
85-
items: [
86-
DSC02572,
87-
DSC02594,
88-
DSC02601,
89-
DSC02604,
90-
DSC02609,
91-
DSC02617,
92-
DSC02619,
93-
DSC02630,
94-
DSC02632,
95-
DSC02635,
96-
DSC02638,
97-
DSC02639,
98-
DSC02643,
99-
DSC02645,
100-
DSC02646,
101-
DSC02659,
102-
DSC02677,
103-
DSC02680,
104-
DSC02762,
105-
DSC02810,
106-
DSC02820,
107-
DSC02823,
108-
DSC02824,
109-
DSC02830,
110-
DSC02868,
111-
DSC02870,
112-
DSC02872,
113-
DSC02876,
114-
DSC02879,
115-
DSC02886,
116-
DSC02889,
117-
DSC02903,
118-
DSC02908,
119-
DSC02914,
120-
DSC02919,
121-
DSC02920,
122-
DSC02923,
123-
DSC02926,
124-
DSC02928,
125-
DSC02931,
126-
DSC02941,
127-
DSC02946,
128-
DSC02949,
129-
DSC02957,
130-
DSC02962,
131-
DSC02969,
132-
DSC02974,
133-
DSC02983,
134-
DSC02992,
135-
DSC02998,
136-
DSC03006,
137-
DSC03022,
138-
DSC03032,
139-
140-
]
141-
}
142-
4+
import images from "../../assets/images/event/Images";
5+
import {GalleryDialog} from "./GalleryDialog/GalleryDialog";
1436

1447
export function Gallery() {
1458

1469
const [galleryTab, setGalleryTab] = useState(0)
10+
const [isGalleryOpen, setIsGalleryOpen] = useState(false)
11+
12+
const oneThird = Math.floor(images[galleryTab].items.length / 3);
13+
const firstImages = images[galleryTab].items.slice(0, oneThird)
14+
const secondImages = images[galleryTab].items.slice(oneThird, oneThird * 2)
15+
const thirdImages = images[galleryTab].items.slice(oneThird * 2, images[galleryTab].items.length)
16+
17+
const baseSeconds = 10
18+
19+
function renderImages(imageList, offset) {
20+
return <Box sx={{position: "relative", overflow: "hidden", height: "200px"}}>
21+
<Box sx={{
22+
position: "absolute",
23+
top: "0px",
24+
left: `${offset}px`,
25+
overflow: "hidden",
26+
whitespace: "nowrap",
27+
animation: `bannermove ${baseSeconds * firstImages.length}s linear infinite`,
28+
height: "100%",
29+
margin: "0.5em",
30+
display: "flex"
31+
}}>
32+
{imageList.map(image => <Box sx={{
33+
margin: "0.5em",
34+
aspectRatio: "16/10",
35+
background: `url(${image.src})`,
36+
backgroundSize: "cover",
37+
38+
height: "100%"
39+
}}/>)}
40+
{imageList.map(image => <Box sx={{
41+
margin: "0.5em",
42+
aspectRatio: "16/10",
43+
background: `url(${image.src})`,
44+
backgroundSize: "cover",
45+
height: "100%"
46+
}}/>)}
47+
</Box>
48+
</Box>
49+
}
14750

14851
return (
149-
<Container sx={{paddingTop: 10, paddingBottom: 10}}>
150-
<Typography variant={"h2"} component={"h1"} gutterBottom>Gallery</Typography>
151-
<Grid container spacing={7} alignItems="center">
152-
<Grid item xs={12} md={12}>
153-
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
154-
<Tabs value={galleryTab} textColor={"#e0e0e0"} onChange={(event, value) => setGalleryTab(value)} TabIndicatorProps={{style: {background: "linear-gradient(90deg, rgba(58,12,163,1) 0%, rgba(114,9,183,1) 100%)", color: "yellow"}}} aria-label="basic tabs example">
155-
<Tab label="2024" color={"yellow"} {...a11yProps(0)} />
156-
<Tab label="2023" color={"secondary"} {...a11yProps(1)} />
157-
</Tabs>
158-
</Box>
159-
<Box sx={{maxHeight: "30rem", overflowY: "scroll"}}>
160-
<ImageList variant="masonry" cols={3} gap={8}>
161-
<CustomTabPanel value={galleryTab} index={0}>
162-
{images.items.map((item, i) => (
163-
<ImageListItem key={i}>
164-
<img
165-
key={"img" + i}
166-
srcSet={`${item.src}?w=248&fit=crop&auto=format&dpr=2 2x`}
167-
src={`${item.src}?w=248&fit=crop&auto=format`}
168-
alt={item.title}
169-
loading="lazy"
170-
/>
171-
</ImageListItem>
172-
))}
173-
</CustomTabPanel>
174-
<CustomTabPanel value={galleryTab} index={1}>
175-
{images.items.map((item, i) => (
176-
<ImageListItem key={i}>
177-
<img
178-
key={"img" + i}
179-
srcSet={`${item.src}?w=248&fit=crop&auto=format&dpr=2 2x`}
180-
src={`${item.src}?w=248&fit=crop&auto=format`}
181-
alt={item.title}
182-
loading="lazy"
183-
/>
184-
</ImageListItem>
185-
))}
186-
</CustomTabPanel>
187-
</ImageList>
188-
</Box>
189-
</Grid>
190-
</Grid>
191-
</Container>
52+
<Box sx={{pt: 10, pb: 10}} id={"images"}>
53+
{renderImages(firstImages, -100)}
54+
{renderImages(secondImages, -150)}
55+
{renderImages(thirdImages, -200)}
56+
<Container sx={{display: "flex", justifyContent: "flex-end"}}>
57+
<Button color={"inherit"} sx={{mt: 3}} onClick={() => setIsGalleryOpen(true)}>View full Gallery</Button>
58+
</Container>
59+
<GalleryDialog isOpen={isGalleryOpen} onClose={() => setIsGalleryOpen(false)}/>
60+
</Box>
19261
)
19362

19463
}

0 commit comments

Comments
 (0)