feat: created programHorizontalList component and added to main page

Author: carboninl

src/app/api/program/route.ts

@@ -13,7 +13,7 @@ export async function GET(): Promise<NextResponse> {
   await connectDB();
 
   try {
-    const programs = await Program.find();
+    const programs = await Program.find().sort({ date: 1 });
     return NextResponse.json({
       programs: programs,
       status: 200,

src/app/page.tsx

@@ -1,46 +1,10 @@
 import Image from "next/image";
 import style from "./page.module.css";
-import ProgramCard from "@/components/Program";
-import connectDB from "@/database/db";
-import ProgramModel from "@/database/models/programSchema";
+import ProgramHorizontalList from "@/components/ProgramHorizontalList";
 
 export const dynamic = "force-dynamic";
 
-type ProgramRecord = {
-  imageURI: string;
-  location: string;
-  date: Date | string;
-  duration: string;
-  programName: string;
-  programId: string;
-};
-
-const formatProgramDate = (value: Date | string) => {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return "Date TBD";
-  }
-
-  return date.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
-};
-
-const getPrograms = async (): Promise<ProgramRecord[]> => {
-  try {
-    await connectDB();
-    return await ProgramModel.find().sort({ date: 1 }).lean<ProgramRecord[]>();
-  } catch (error) {
-    console.error("Error fetching programs for home page:", error);
-    return [];
-  }
-};
-
 export default async function Home() {
-  const programs = await getPrograms();
-
   return (
     <div className={style.pageContainer}>
       <header className={style.pageHeader}>
@@ -102,23 +66,7 @@ export default async function Home() {
 
       <div className={style.programs}>
         <h2 className={style.sectionTitle}>Our Programs</h2>
-
-        <div className={style.programCards}>
-          {programs.length > 0 ? (
-            programs.map((program) => (
-              <ProgramCard
-                key={program.programId}
-                image={program.imageURI}
-                title={program.programName}
-                location={program.location}
-                date={formatProgramDate(program.date)}
-                time={program.duration}
-              />
-            ))
-          ) : (
-            <div className={style.programCard}>No programs available right now.</div>
-          )}
-        </div>
+        <ProgramHorizontalList />
       </div>
 
       <div className={style.pageFooter}>

src/components/ProgramHorizontalList.tsx

@@ -0,0 +1,62 @@
+import ProgramCard from "@/components/Program";
+import connectDB from "@/database/db";
+import ProgramModel from "@/database/models/programSchema";
+import style from "@/styles/ProgramHorizontalList.module.css";
+
+type ProgramRecord = {
+  imageURI: string;
+  location: string;
+  date: Date | string;
+  duration: string;
+  programName: string;
+  programId: string;
+};
+
+const formatProgramDate = (value: Date | string) => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "Date TBD";
+  }
+
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+};
+
+const getPrograms = async (): Promise<ProgramRecord[]> => {
+  try {
+    await connectDB();
+    return await ProgramModel.find().sort({ date: 1 }).lean<ProgramRecord[]>();
+  } catch (error) {
+    console.error("Error fetching programs for horizontal list:", error);
+    return [];
+  }
+};
+
+const ProgramHorizontalList = async () => {
+  const programs = await getPrograms();
+
+  if (programs.length === 0) {
+    return <div className={style.emptyState}>No programs available right now.</div>;
+  }
+
+  return (
+    <div className={style.scrollFrame} aria-label="Programs">
+      {programs.map((program) => (
+        <div className={style.cardSlot} key={program.programId}>
+          <ProgramCard
+            image={program.imageURI}
+            title={program.programName}
+            location={program.location}
+            date={formatProgramDate(program.date)}
+            time={program.duration}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ProgramHorizontalList;

src/styles/ProgramHorizontalList.module.css

@@ -0,0 +1,30 @@
+.scrollFrame {
+  max-width: 1100px;
+  margin: 48px auto 0;
+  padding: 8px 4px 16px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(280px, 380px);
+  gap: 24px;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+}
+
+.cardSlot {
+  scroll-snap-align: start;
+}
+
+.emptyState {
+  min-height: 280px;
+  max-width: 1100px;
+  margin: 48px auto 0;
+  border-radius: 16px;
+  background: #f1f5f9;
+  display: grid;
+  place-items: center;
+  color: #4a5565;
+  font-size: 18px;
+  text-align: center;
+  padding: 24px;
+}