Merge pull request #78 from TEDx-SJEC/contact

update: performers

src/app/previous-editions/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+import UnsplashGrid from "@/components/common/gridsplash";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+type Props = {};
+
+const Previous = (props: Props) => {
+  const router = useRouter();
+  return (
+    <div className="my-24 mx-auto w-fit px-4">
+      <div className="flex items-center justify-start w-min lg:px-20 px-4 mb-4">
+        <button
+          className="text-red-600 hover:text-red-800 flex items-center space-x-2"
+          onClick={() => router.back()}
+        >
+          <svg
+            className="w-5 h-5"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          <span>Back</span>
+        </button>
+      </div>
+      <h1 className="text-center text-6xl font-black">2022 Edition</h1>
+      <UnsplashGrid year={2022} />
+      <h1 className="text-center text-6xl font-black">2020 Edition</h1>
+      <UnsplashGrid year={2020} />
+    </div>
+  );
+};
+
+export default Previous;

src/components/common/container-scroll.tsx

@@ -21,6 +21,7 @@ export function PreviousEdition() {
           width="100%"
           height="450"
           src="https://www.youtube.com/embed/NCWwTsAjiys?si=xBkmPtQEYQl_tEIX"
+          className="md:h-[450px] h-[200px]"
         ></iframe>
       </ContainerScroll>
     </div>

src/components/common/gridsplash.tsx

@@ -5,42 +5,63 @@ import Image from "next/image";
 import { X } from "lucide-react";
 import { tedxsjecAssetsPrefix } from "@/lib/utils";
 import { speakers } from "@/constants";
+import { prevEdition22, prevEdition20 } from "@/constants";
 
-function UnsplashGrid() {
+type UnsplashGridProps = {
+  year: number;
+};
+
+function UnsplashGrid(props: UnsplashGridProps) {
   const [selected, setSelected] = useState(null);
 
   return (
     <>
-      <div className="flex justify-center">
-        <div className="container mx-auto p-2 sm:p-4 lg:px-20 ">
-          <div className="columns-2 md:columns-3 2xl:columns-3 gap-3">
+      {props.year === 2022 ? (
+        <div className="flex justify-center">
+          <div className="container mx-auto p-2 sm:p-4 lg:px-20 ">
+            <div className="columns-2 md:columns-3 2xl:columns-3 gap-3">
+              <>
+                {prevEdition22.map((img, index) => (
+                  <ImageItem
+                    key={img.id}
+                    item={img}
+                    index={index}
+                    setSelected={setSelected}
+                  />
+                ))}
+              </>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex justify-center">
+          <div className="container mx-auto p-2 sm:p-4 lg:px-20 ">
+            <div className="columns-2 md:columns-3 2xl:columns-3 gap-3">
             <>
-              {speakers.map((speaker, index) => (
-                <ImageItem
-                  key={speaker.id}
-                  item={speaker}
-                  index={index}
-                  setSelected={setSelected}
-                />
-              ))}
-            </>
+                {prevEdition20.map((img, index) => (
+                  <ImageItem
+                    key={img.id}
+                    item={img}
+                    index={index}
+                    setSelected={setSelected}
+                  />
+                ))}
+              </>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </>
   );
 }
 
-interface Speaker {
+interface PreviousEdition {
   id: number;
   img: string;
-  name: string;
-  profession: string;
-  description: string;
 }
 
 interface ImageItemProps {
-  item: Speaker;
+  item: PreviousEdition;
   index: number | string;
   setSelected: any;
 }
@@ -68,7 +89,7 @@ function ImageItem({ item, index, setSelected }: ImageItemProps) {
 }
 
 interface ModalProps {
-  selected: Speaker | null;
+  selected: PreviousEdition | null;
   setSelected: any;
 }
 
@@ -139,10 +160,10 @@ function Modal({ selected, setSelected }: ModalProps) {
                 variants={itemVariants}
                 className="text-2xl font-bold mb-2"
               >
-                {selected.name}
+                {/* {selected.name} */}
               </motion.h3>
               <motion.p variants={itemVariants} className="my-4">
-                {selected.description}
+                {/* {selected.description} */}
               </motion.p>
             </motion.div>
           </motion.div>