Skip to content

Commit 284408e

Browse files
wrcroboticswrcrobotics
authored
Merge pull request #25 from WRCRoboticsClub/dev-prashant
aaded
2 parents d55e6c8 + 837434b commit 284408e

5 files changed

Lines changed: 169 additions & 172 deletions

File tree

‎src/components/SingleAchievement.js‎

Lines changed: 47 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,57 @@
1-
import { Box, Heading, Text, Image, Button } from "theme-ui";
1+
import React from "react";
2+
import { Box, Heading, Image, Button } from "theme-ui";
23
import ShapePattern1 from "../assets/shape-pattern1.png";
34
import ShapePattern2 from "../assets/shape-pattern2.png";
4-
import Link from "next/link";
55

6-
function SingleAchievement({ infos, id }) {
6+
function fixDriveUrl(url) {
7+
if (!url) return "";
8+
9+
// Extract file ID from common Google Drive URL patterns
10+
const idMatch = url.match(/(?:id=|\/d\/)([a-zA-Z0-9_-]+)/);
11+
if (!idMatch) return url;
12+
const fileId = idMatch[1];
13+
14+
// Construct lh3.googleusercontent.com direct URL for image thumbnails
15+
return `https://lh3.googleusercontent.com/d/${fileId}=s0`;
16+
}
17+
18+
19+
function SingleAchievement({ infos, id, onShowDetails }) {
20+
const imageUrl = fixDriveUrl(infos.image[0]);
21+
722
return (
8-
<>
9-
<Box sx={styles.banner}>
10-
<Box sx={styles.backdrop}>
11-
<Box sx={styles.banner.container}>
12-
<Box sx={styles.gridContainer}>
13-
{/* Left Portion */}
14-
<Box>
15-
<Heading sx={styles.heading}>{infos.title[0]}</Heading>
16-
<p style={{ fontSize: "20px", lineHeight: "1.5" }}>
17-
{infos.desc[0]}
18-
</p>
19-
<Link href={infos.fb[0]} target="_blank" passHref>
20-
<Button>Show Details</Button>
21-
</Link>
22-
</Box>
23-
{/* Right Portion */}
24-
<Box
25-
sx={styles.imageBoxContainer}
26-
style={id % 2 ? { order: 1 } : { order: -1 }}
27-
>
28-
<Image src={infos.image[0]} style={{ width: "100%" }} />
29-
{/* <Image
30-
sx={styles.imageBoxContainer.svgImageLeft}
31-
src={ShapeLeft.src}
32-
/>
33-
<Image
34-
sx={styles.imageBoxContainer.svgImageRight}
35-
src={ShapeRight.src}
36-
/> */}
37-
{id % 2 ? (
38-
<Box sx={styles.shapeBoxRight}>
39-
<Image src={ShapePattern2.src} alt="shape" />
40-
</Box>
41-
) : (
42-
<Box sx={styles.shapeBoxLeft}>
43-
<Image src={ShapePattern1.src} alt="shape" />
44-
</Box>
45-
)}
46-
</Box>
23+
<Box sx={styles.banner}>
24+
<Box sx={styles.backdrop}>
25+
<Box sx={styles.banner.container}>
26+
<Box sx={styles.gridContainer}>
27+
{/* Left Portion */}
28+
<Box>
29+
<Heading sx={styles.heading}>{infos.title[0]}</Heading>
30+
<p style={{ fontSize: "20px", lineHeight: "1.5" }}>
31+
{infos.desc[0].slice(0, 100)}...
32+
</p>
33+
<Button onClick={() => onShowDetails(infos)}>Show Details</Button>
34+
</Box>
35+
{/* Right Portion */}
36+
<Box
37+
sx={styles.imageBoxContainer}
38+
style={id % 2 ? { order: 1 } : { order: -1 }}
39+
>
40+
<Image src={imageUrl} style={{ width: "100%" }} />
41+
{id % 2 ? (
42+
<Box sx={styles.shapeBoxRight}>
43+
<Image src={ShapePattern2.src} alt="shape" />
44+
</Box>
45+
) : (
46+
<Box sx={styles.shapeBoxLeft}>
47+
<Image src={ShapePattern1.src} alt="shape" />
48+
</Box>
49+
)}
4750
</Box>
4851
</Box>
4952
</Box>
5053
</Box>
51-
</>
54+
</Box>
5255
);
5356
}
5457

@@ -61,112 +64,42 @@ const styles = {
6164
"@media screen and (max-width:500px)": {
6265
order: "-10 !important",
6366
},
64-
svgImageLeft: {
65-
position: "absolute",
66-
bottom: 0,
67-
height: "30%",
68-
},
69-
svgImageRight: {
70-
position: "absolute",
71-
left: "-15%",
72-
zIndex: -1,
73-
height: "30%",
74-
},
75-
},
76-
imageBoxContainerSM: {
77-
order: -1,
78-
objectFit: "cover",
79-
position: "relative",
80-
svgImageLeft: {
81-
position: "absolute",
82-
bottom: 0,
83-
height: "30%",
84-
},
85-
svgImageRight: {
86-
position: "absolute",
87-
// left: "right",
88-
left: "-15%",
89-
zIndex: -1,
90-
height: "30%",
91-
},
9267
},
9368
gridContainer: {
9469
display: "grid",
9570
gridGap: 8,
96-
gridTemplateColumns: ["auto", "auto", " 1fr 1fr"],
71+
gridTemplateColumns: ["auto", "auto", "1fr 1fr"],
9772
alignItems: "center",
9873
},
9974
heading: {
10075
fontSize: "40px",
10176
fontWeight: "bold",
10277
textAlign: "left",
10378
},
104-
para: {
105-
fontSize: "20px",
106-
padding: "10px 0",
107-
backgroundColor: "Pink",
108-
},
10979
banner: {
11080
pt: ["140px", "145px", "155px", "170px", null, null, "180px", "215px"],
11181
pb: [2, null, 0, null, 2, 0, null, 5],
11282
position: "relative",
11383
zIndex: 2,
114-
11584
container: {
11685
minHeight: "inherit",
11786
padding: "40px",
11887
maxWidth: "1200px",
11988
mx: "auto",
12089
},
121-
contentBox: {
122-
width: ["100%", "90%", "535px", null, "57%", "60%", "68%", "60%"],
123-
mx: "auto",
124-
textAlign: "center",
125-
mb: ["40px", null, null, null, null, 7],
126-
},
127-
imageBox: {
128-
justifyContent: "center",
129-
textAlign: "center",
130-
display: "inline-flex",
131-
mb: [0, null, -6, null, null, "-40px", null, -3],
132-
img: {
133-
position: "relative",
134-
height: [200, "auto"],
135-
},
136-
},
13790
},
13891
shapeBoxLeft: {
13992
position: "absolute",
14093
bottom: -68,
14194
left: -160,
14295
zIndex: -1,
14396
display: ["none", null, "none", null, null, "inline-block"],
144-
// "@media screen and (max-width:1450)": {
145-
// width: "200px",
146-
// height: "200px",
147-
// left: -67,
148-
// },
149-
// "@media screen and (max-width:500)": {
150-
// width: "150px",
151-
// height: "150px",
152-
// left: -67,
153-
// },
15497
},
15598
shapeBoxRight: {
15699
position: "absolute",
157100
bottom: -65,
158101
right: -150,
159102
zIndex: -1,
160103
display: ["none", null, "none", null, null, "inline-block"],
161-
// "@media screen and (max-width:1450)": {
162-
// width: "200px",
163-
// height: "200px",
164-
// right: -67,
165-
// },
166-
// "@media screen and (max-width:500)": {
167-
// width: "150px",
168-
// height: "150px",
169-
// right: -67,
170-
// },
171104
},
172105
};

‎src/pages/_app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ function MyApp({ Component, pageProps }) {
1111
<ThemeProvider theme={theme}>
1212
<ModalStack>
1313
<Layout>
14-
<SEO title="Robotics Club,WRC" />
14+
<SEO title="Robotics Club, WRC" />
1515
<Component {...pageProps} />
1616
</Layout>
1717
</ModalStack>

‎src/pages/achievements.js‎

Lines changed: 103 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,114 @@
1-
// TODO : Achievement desription pop up
2-
1+
import React, { useState } from "react";
32
import SingleAchievement from "../components/SingleAchievement";
4-
import { useState, useEffect } from "react";
5-
import axios from "axios";
3+
import { Box, Button } from "theme-ui";
64

75
export default function Achievements({ achievement }) {
8-
// const [achievementData, setData] = useState([]);
9-
// useEffect(() => {
10-
// const fetchData = async () => {
11-
// try {
12-
// const response = await axios.get("/api/achievement");
13-
// setData(response.data.data);
14-
// } catch (error) {
15-
// console.error("Error fetching data:", error);
16-
// }
17-
// };
18-
19-
// fetchData();
20-
// }, []);
21-
22-
//console.log(achievement.data);
6+
const [selected, setSelected] = useState(null);
7+
8+
const closeModal = () => setSelected(null);
9+
2310
return (
24-
<section id="achievement">
25-
{achievement.data.map((data, index) => {
26-
//always use keys for react while mapping
27-
return <SingleAchievement key={index} infos={data} id={index} />;
28-
})}
29-
</section>
11+
<>
12+
<section id="achievement" sx={{ display: "flex", flexWrap: "wrap", gap: 3 }}>
13+
{achievement.data.map((data, index) => (
14+
<SingleAchievement
15+
key={index}
16+
infos={data}
17+
id={index}
18+
onShowDetails={setSelected}
19+
/>
20+
))}
21+
</section>
22+
23+
{selected && (
24+
<Box
25+
className="achievement-popup-overlay"
26+
onClick={closeModal}
27+
sx={{
28+
position: "fixed",
29+
inset: 0,
30+
backgroundColor: "rgba(0,0,0,0.7)",
31+
display: "flex",
32+
justifyContent: "center",
33+
alignItems: "center",
34+
zIndex: 9999,
35+
}}
36+
>
37+
<Box
38+
onClick={(e) => e.stopPropagation()}
39+
sx={{
40+
bg: "background",
41+
p: 4,
42+
borderRadius: 8,
43+
maxWidth: 600,
44+
maxHeight: "80vh",
45+
overflowY: "auto",
46+
position: "relative",
47+
}}
48+
>
49+
<Button
50+
onClick={closeModal}
51+
sx={{
52+
position: "absolute",
53+
top: 12,
54+
right: 12,
55+
fontSize: 4,
56+
padding: 0,
57+
minWidth: 24,
58+
minHeight: 24,
59+
lineHeight: 1,
60+
}}
61+
aria-label="Close modal"
62+
>
63+
&times;
64+
</Button>
65+
66+
<h2>{selected.title[0]}</h2>
67+
<p>{selected.desc[0]}</p>
68+
69+
{selected.date && selected.date[0] && (
70+
<p>
71+
<strong>Date:</strong> {selected.date[0]}
72+
</p>
73+
)}
74+
75+
{selected.fb && selected.fb[0] && (
76+
<p>
77+
<a href={selected.fb[0]} target="_blank" rel="noopener noreferrer">
78+
Facebook Link
79+
</a>
80+
</p>
81+
)}
82+
{selected.youtube && selected.youtube[0] && (
83+
<p>
84+
<a href={selected.youtube[0]} target="_blank" rel="noopener noreferrer">
85+
YouTube Link
86+
</a>
87+
</p>
88+
)}
89+
{selected.insta && selected.insta[0] && (
90+
<p>
91+
<a href={selected.insta[0]} target="_blank" rel="noopener noreferrer">
92+
Instagram Link
93+
</a>
94+
</p>
95+
)}
96+
{selected.medium && selected.medium[0] && (
97+
<p>
98+
<a href={selected.medium[0]} target="_blank" rel="noopener noreferrer">
99+
Medium Link
100+
</a>
101+
</p>
102+
)}
103+
</Box>
104+
</Box>
105+
)}
106+
</>
30107
);
31108
}
32109

33-
// export async function getStaticPaths() {
34-
// // Fetch the list of achievements IDs from the external API
35-
// const res = await fetch(
36-
// "https://wrcrobotics.pythonanywhere.com/achievements"
37-
// );
38-
// const achievementData = await res.json();
39-
// const paths = achievementData.data.map((achievement) => ({
40-
// params: { id: achievement.id.toString() },
41-
// }));
42-
43-
// return {
44-
// paths: [],
45-
// fallback: false,
46-
// };
47-
// }
48-
49110
export async function getStaticProps() {
50-
const res = await fetch(
51-
`https://wrcrobotics.pythonanywhere.com/achievements`
52-
);
111+
const res = await fetch("https://wrcrobotics.pythonanywhere.com/achievements");
53112
const achievement = await res.json();
54113

55114
return {

0 commit comments

Comments
 (0)