Skip to content

Niklas 1 #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SimonBurmer merged 1 commit into from
Apr 5, 2026
+240 −331
Merged

Niklas 1 #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 144 additions & 0 deletions app/for-partners/PhotoGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
"use client"

import { useState } from 'react'
import Image from 'next/image'

const eventPhotos = [
{
id: "ep1",
url: "/partners/partnerEvents/RTSH.JPG",
caption: "Road to START Hack 26",
href: "/events/rtsh"
},
{
id: "ep2",
url: "/partners/partnerEvents/RTSH2.JPG",
caption: "Road to START Hack 26",
href: "/events/rtsh"
},
{
id: "ep3",
url: "/partners/partnerEvents/RTSS1.jpg",
caption: "Road to START Summit 26",
href: "/events/rtss"
},
{
id: "ep4",
url: "/partners/partnerEvents/RTSS2.JPG",
caption: "Road to START Summit 26",
href: "/events/rtss"
},
{
id: "ep5",
url: "/partners/partnerEvents/PitchUNetwork.JPG",
caption: "Pitch & Network"
},
{
id: "ep6",
url: "/partners/partnerEvents/MHL1.jpg",
caption: "Munich Hacking Legal 25",
href: "/events/leagel-hack"
},
Comment on lines +40 to +41
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Typo: "leagel-hack" should likely be "legal-hack".

The href /events/leagel-hack appears to have a typo — "leagel" instead of "legal".

🐛 Proposed fix 
   {
     id: "ep6",
     url: "/partners/partnerEvents/MHL1.jpg",
     caption: "Munich Hacking Legal 25",
-    href: "/events/leagel-hack"
+    href: "/events/legal-hack"
   },
   {
     id: "ep7",
     url: "/partners/partnerEvents/MHL2.jpg",
     caption: "Munich Hacking Legal 25",
-    href: "/events/leagel-hack"
+    href: "/events/legal-hack"
   },

Also applies to: 45-46

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/for-partners/PhotoGallery.tsx` around lines 40 - 41, Typo in
PhotoGallery.tsx: update the href value(s) from "/events/leagel-hack" to the
correct "/events/legal-hack" wherever they appear (e.g., the href property in
the gallery item objects around the occurrences shown); edit the href strings in
the relevant JSX/objects so both instances (the one at the first object and the
second object) use "/events/legal-hack".

{
id: "ep7",
url: "/partners/partnerEvents/MHL2.jpg",
caption: "Munich Hacking Legal 25",
href: "/events/leagel-hack"
},
{
id: "ep8",
url: "/partners/partnerEvents/IsarUnfiltered.jpg",
caption: "Isar Unfiltered",
href: "/events/iu/home"
},
{
id: "ep9",
url: "/partners/partnerEvents/IsarUnfiltered2.jpg",
caption: "Isar Unfiltered",
href: "/events/iu/home"
},
{
id: "ep10",
url: "/partners/partnerEvents/FounderFailTails.JPG",
caption: "Founder Fail Tales",
href: "/events/founder-fail-tales-4"
}
]

export default function PhotoGallery() {
const [photoIndex, setPhotoIndex] = useState(0)

return (
<section>
<div className="mb-12 flex flex-col md:flex-row md:items-end md:justify-between gap-6">
<div>
<p className="text-brand-pink text-sm font-bold tracking-[0.2em] uppercase mb-3">Gallery</p>
<h2 className="text-3xl md:text-4xl font-black text-white mb-3">
PARTNERS AT <span className="outline-text">OUR EVENTS</span>
</h2>
<p className="text-gray-400 text-lg max-w-3xl">
Highlights from recent partner collaborations and events
</p>
</div>

<div className="flex items-center gap-3 flex-shrink-0">
<span className="text-sm text-gray-500 tabular-nums">
{String(Math.floor(photoIndex / 6) + 1).padStart(2, '0')} / {String(Math.ceil(eventPhotos.length / 6)).padStart(2, '0')}
Comment on lines +85 to +86
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Page counter calculation is misaligned with navigation logic.

The page counter uses Math.floor(photoIndex / 6) + 1, but the "next" button caps photoIndex at eventPhotos.length - 6 (which is 4 for 10 photos). When photoIndex becomes 4, Math.floor(4/6) + 1 = 1, so the counter still shows "01" instead of "02".

Consider tracking page number directly or adjusting the counter calculation:

🐛 Proposed fix: Track page index directly 
 export default function PhotoGallery() {
-  const [photoIndex, setPhotoIndex] = useState(0)
+  const [pageIndex, setPageIndex] = useState(0)
+  const pageSize = 6
+  const totalPages = Math.ceil(eventPhotos.length / pageSize)
+  const photoIndex = pageIndex * pageSize

   return (
     <section>
       <div className="mb-12 flex flex-col md:flex-row md:items-end md:justify-between gap-6">
         ...
         <div className="flex items-center gap-3 flex-shrink-0">
           <span className="text-sm text-gray-500 tabular-nums">
-            {String(Math.floor(photoIndex / 6) + 1).padStart(2, '0')} / {String(Math.ceil(eventPhotos.length / 6)).padStart(2, '0')}
+            {String(pageIndex + 1).padStart(2, '0')} / {String(totalPages).padStart(2, '0')}
           </span>
           <button
-            onClick={() => setPhotoIndex(Math.max(0, photoIndex - 6))}
-            disabled={photoIndex === 0}
+            onClick={() => setPageIndex(Math.max(0, pageIndex - 1))}
+            disabled={pageIndex === 0}
             ...
           >
           <button
-            onClick={() => setPhotoIndex(Math.min(eventPhotos.length - 6, photoIndex + 6))}
-            disabled={photoIndex + 6 >= eventPhotos.length}
+            onClick={() => setPageIndex(Math.min(totalPages - 1, pageIndex + 1))}
+            disabled={pageIndex >= totalPages - 1}
             ...
           >
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/for-partners/PhotoGallery.tsx` around lines 85 - 86, The page counter
calculation using Math.floor(photoIndex / 6) + 1 is out of sync with the
navigation cap (photoIndex is clamped to Math.max(0, eventPhotos.length - 6)),
so compute the displayed page by checking for the capped "last start" and
otherwise using the normal division: let totalPages =
Math.ceil(eventPhotos.length / 6); let lastStart = Math.max(0,
eventPhotos.length - 6); let currentPage = photoIndex === lastStart ? totalPages
: Math.floor(photoIndex / 6) + 1; then use currentPage / totalPages in the span
(or alternatively maintain a dedicated pageIndex state updated in the next/prev
handlers). Reference symbols: photoIndex, eventPhotos.length, totalPages,
lastStart.

</span>
<button
onClick={() => setPhotoIndex(Math.max(0, photoIndex - 6))}
disabled={photoIndex === 0}
className="w-12 h-12 rounded-full border-2 border-white/20 hover:border-brand-pink hover:bg-brand-pink text-white flex items-center justify-center transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
onClick={() => setPhotoIndex(Math.min(eventPhotos.length - 6, photoIndex + 6))}
disabled={photoIndex + 6 >= eventPhotos.length}
className="w-12 h-12 rounded-full bg-brand-pink hover:bg-brand-pink/80 text-white flex items-center justify-center transition-all duration-300 disabled:opacity-30 disabled:cursor-not-allowed"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{eventPhotos.map((photo, index) => {
const isVisible = index >= photoIndex && index < photoIndex + 6
const Wrapper = photo.href ? 'a' : 'div'
const wrapperProps = photo.href ? { href: photo.href } : {}
return (
<Wrapper
key={photo.id}
{...wrapperProps}
className={`group relative overflow-hidden rounded-3xl aspect-video border border-white/10 hover:border-brand-pink/40 transition-all duration-300 block shadow-lg hover:shadow-brand-pink/10${!isVisible ? ' hidden' : ''}`}
>
<Image
src={photo.url}
alt={photo.caption}
fill
className="object-cover group-hover:scale-110 transition-transform duration-500"
/>
<div className="absolute inset-0 bg-gradient-to-t from-brand-dark-blue via-brand-dark-blue/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl">
<div className="absolute bottom-0 left-0 right-0 p-6">
<p className="text-white font-bold text-lg">{photo.caption}</p>
</div>
</div>
{photo.href && (
<div className="absolute top-4 right-4 w-10 h-10 bg-white/10 backdrop-blur-md rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 scale-50 group-hover:scale-100">
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 17L17 7M17 7H7M17 7v10" />
</svg>
</div>
)}
</Wrapper>
)
})}
</div>
</section>
)
}
Loading