From 1f214c19f98462068793dc7cd9123b3ed6a49f70 Mon Sep 17 00:00:00 2001
From: JaneIRL <103539883+JaneIRL@users.noreply.github.com>
Date: Fri, 6 Oct 2023 18:15:20 -0500
Subject: [PATCH] Optimize organizers section for mobile view

---
 src/app/MeetTheTeamSection.tsx         | 70 ++++++++++++++++++++++++++
 src/app/page.tsx                       | 21 +-------
 src/components/Organizer/Organizer.tsx |  2 +-
 3 files changed, 73 insertions(+), 20 deletions(-)
 create mode 100644 src/app/MeetTheTeamSection.tsx

diff --git a/src/app/MeetTheTeamSection.tsx b/src/app/MeetTheTeamSection.tsx
new file mode 100644
index 0000000..ef7f93e
--- /dev/null
+++ b/src/app/MeetTheTeamSection.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { Organizer, OrganizerProps } from '@/components/Organizer'
+import { WavyPattern } from '@/components/WavyPattern'
+import { useRef } from 'react'
+import { OrganizerData } from './admin/organizers/OrganizerData'
+
+export interface MeetTheTeamSectionProps {
+	organizers: readonly OrganizerData[]
+}
+export function MeetTheTeamSection({ organizers }: MeetTheTeamSectionProps) {
+	const containerRef = useRef<HTMLDivElement>(null)
+	// const [pos, setPos] = useState(0)
+	// const [autoScroll, setAutoScroll] = useState(true)
+
+	// useEffect(() => {
+	// 	const container = containerRef.current
+	// 	if (!container) {
+	// 		return
+	// 	}
+	// 	const interval = setInterval(() => {
+	// 		if (!autoScroll) {
+	// 			return
+	// 		}
+	// 		setPos((pos) =>
+	// 			(pos + 1) % (container.scrollWidth - container.clientWidth)
+	// 		)
+	// 	}, 100)
+	// 	container.addEventListener('mouseenter', () => {
+	// 		setAutoScroll(false)
+	// 	})
+	// 	container.addEventListener('mouseleave', () => {
+	// 		setAutoScroll(true)
+	// 	})
+	// 	return () => clearInterval(interval)
+	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// }, [])
+
+	// useEffect(() => {
+	// 	const container = containerRef.current
+	// 	if (!container) {
+	// 		return
+	// 	}
+	// 	container.scrollLeft = pos
+	// }, [pos])
+
+	return (
+		<div className="flex flex-col items-center justify-center gap-8 bg-hackuta-red bg-hackuta-pattern-transparent p-8 md:p-16 w-full">
+			<h2 className="flex flex-col items-center gap-2 font-heading drop-shadow-hackuta text-white text-4xl">
+				Meet the Team
+				<WavyPattern className="w-32" strokeColor="rgb(0,0,0,.3)" />
+			</h2>
+			<div
+				ref={containerRef}
+				className="flex flex-row justify-start items-center w-full overflow-x-auto lg:justify-center lg:flex-wrap"
+			>
+				{organizers.map((organizer: OrganizerProps) => (
+					<Organizer
+						key={`${organizer.name}`}
+						name={organizer.name}
+						role={organizer.role}
+						avatar={organizer.avatar}
+						socials={organizer.socials}
+						isDirector={organizer.isDirector}
+					/>
+				))}
+			</div>
+		</div>
+	)
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 41d7b44..99c0ddc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,10 +13,10 @@ import { WavyPattern } from '@/components/WavyPattern'
 import { getEnhancedSession } from '@/lib/utils/server'
 
 import GoogleMyMap from '@/components/GoogleMyMap'
-import { Organizer, OrganizerProps } from '@/components/Organizer'
 import Link from 'next/link'
 import { AllTeams } from './admin/organizers/OrganizerData'
 import { FaqSection, getFaqs } from './faq/utils'
+import { MeetTheTeamSection } from './MeetTheTeamSection'
 // https://beta.nextjs.org/docs/api-reference/segment-config#dynamic
 // We read from the database on this route, so this has to be dynamic.
 export const dynamic = 'force-dynamic'
@@ -303,24 +303,7 @@ export default async function Landing() {
 					</div>
 				</div>
 				<FaqSection faqs={faqs} />
-				<div className="flex flex-col items-center justify-center gap-8 bg-hackuta-red bg-hackuta-pattern-transparent p-8 md:p-16 w-full">
-					<h2 className="flex flex-col items-center gap-2 font-heading drop-shadow-hackuta text-white text-4xl">
-						Meet the Team
-						<WavyPattern className="w-32" strokeColor="rgb(0,0,0,.3)" />
-					</h2>
-					<div className="flex flex-row justify-center items-center flex-wrap flex-auto">
-						{AllTeams.map((organizer: OrganizerProps) => (
-							<Organizer
-								key={`${organizer.name}`}
-								name={organizer.name}
-								role={organizer.role}
-								avatar={organizer.avatar}
-								socials={organizer.socials}
-								isDirector={organizer.isDirector}
-							/>
-						))}
-					</div>
-				</div>
+				<MeetTheTeamSection organizers={AllTeams} />
 				<div className="flex flex-col items-center justify-center gap-8 bg-hackuta-red bg-hackuta-pattern-transparent p-8 md:p-16 w-full">
 					<h2 className="flex flex-col items-center gap-2 font-heading drop-shadow-hackuta text-white text-4xl">
 						Sponsors & Partners
diff --git a/src/components/Organizer/Organizer.tsx b/src/components/Organizer/Organizer.tsx
index a3d6c0b..f3bfee1 100644
--- a/src/components/Organizer/Organizer.tsx
+++ b/src/components/Organizer/Organizer.tsx
@@ -39,7 +39,7 @@ export const Organizer = ({
 			direction="column"
 			justifyContent="space-between"
 			gap=".625rem"
-			className="bg-hackuta-darkred drop-shadow-hackuta hover:drop-shadow-none hover:rounded-2xl py-4 m-2 max-w-xl w-40 h-56 text-center rounded-lg flex flex-col justify-between transition-all hover:opacity-90"
+			className="bg-hackuta-darkred drop-shadow-hackuta hover:drop-shadow-none hover:rounded-2xl py-4 m-2 max-w-xl w-40 h-56 text-center rounded-lg flex flex-col flex-shrink-0 justify-between transition-all hover:opacity-90"
 		>
 			<div>
 				{/* eslint-disable-next-line @next/next/no-img-element */}