Revert "Events slide component implementation (#229)" (#252)

This reverts commit 1a5b579.
ufsasewebmaster · Feb 25, 2025 · 0cada46 · 0cada46
1 parent 1a5b579
commit 0cada46
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 140 deletions.
diff --git a/src/client/components/events/EventsSlidesDisplay.tsx b/src/client/components/events/EventsSlidesDisplay.tsx
diff --git a/src/client/components/events/ImageButton.tsx b/src/client/components/events/ImageButton.tsx
@@ -5,37 +5,23 @@ interface ImageButtonProps {
   imageUrl: string;
   buttonLabel?: string;
   slideUrl: string;
-  imgWidth?: string;
-  imgHeight?: string;
 }
 
-const ImageButton: React.FC<ImageButtonProps> = ({ imageUrl, imgWidth = "320px", slideUrl }) => {
+const ImageButton: React.FC<ImageButtonProps> = ({ imageUrl, slideUrl }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
 
   return (
     <div>
-      <div
-        className="relative aspect-[16/9] cursor-pointer overflow-hidden rounded-lg hover:opacity-90 focus:outline-none"
-        style={{ width: imgWidth }}
-        onClick={openModal}
-      >
-        <img src={imageUrl} alt="Slide thumbnail" className="absolute left-0 top-0 h-full w-full object-cover" />
-      </div>
-
+      <img src={imageUrl} onClick={openModal} className="h-[180px] w-[320px] cursor-pointer hover:opacity-90 focus:outline-none" />
       {isModalOpen && (
-        <Modal isOpen={isModalOpen} title="" description="" onClose={closeModal}>
-          <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 p-5">
-            <div className="relative flex h-[80vh] max-h-[700px] w-[80vw] max-w-[1200px] items-center justify-center rounded-lg bg-white shadow-lg">
-              <button onClick={closeModal} className="absolute left-5 top-5 z-10 rounded-full bg-black p-2 text-white">
-                X
-              </button>
-              <div className="relative aspect-[16/9] h-full w-full">
-                <iframe src={slideUrl} className="absolute left-0 top-0 h-full w-full rounded-lg" allowFullScreen></iframe>
-              </div>
-            </div>
+        <Modal isOpen={isModalOpen} onClose={closeModal} title="Image Preview" description="This is a preview of the selected image.">
+          <div className="relative min-h-[290px] w-full min-w-[450px] pb-[56.25%]">
+            {" "}
+            {/* Aspect ratio 16:9 */}
+            <iframe src={slideUrl} className="absolute left-0 top-0 h-full w-full" allowFullScreen></iframe>
           </div>
         </Modal>
       )}

diff --git a/src/client/routes/events.tsx b/src/client/routes/events.tsx
@@ -1,7 +1,7 @@
 import { imageUrls } from "@assets/imageUrls";
 import EventsCalendar from "@components/EventsCalendar";
 import { createFileRoute } from "@tanstack/react-router";
-import EventsSlides from "../components/events/EventsSlidesDisplay";
+import ImageButton from "../components/events/ImageButton";
 import { seo } from "../utils/seo";
 
 export const Route = createFileRoute("/events")({
@@ -15,7 +15,7 @@ export const Route = createFileRoute("/events")({
   component: () => {
     return (
       <div>
-        <div className="py-5"></div>
+        <div className="py-5"></div> {/* spacer element */}
         <div className="flex justify-center">
           <div className="flex-5 pb-5 text-center font-mono text-7xl">EVENTS & SLIDES</div>
         </div>
@@ -25,8 +25,31 @@ export const Route = createFileRoute("/events")({
         <div className="flex-center">
           <EventsCalendar />
         </div>
-        <div className="flex-center">
-          <EventsSlides />
+        <div className="grid grid-cols-1 justify-items-center gap-6 p-4 sm:grid-cols-2 lg:grid-cols-3">
+          <ImageButton
+            slideUrl="https://docs.google.com/presentation/d/e/2PACX-1vRZwx9OSENEgIJfkpJ4M_1ttXGPrBcP6UTxpgGGGi7J4CYEGaDZY2kKaUdJLRhwq7o9hSHf9vU9LX5s/embed?start=false&loop=false&delayms=3000"
+            imageUrl={imageUrls["ExampleSlideShow.png"]}
+          />
+          <ImageButton
+            slideUrl="https://docs.google.com/presentation/d/e/2PACX-1vRZwx9OSENEgIJfkpJ4M_1ttXGPrBcP6UTxpgGGGi7J4CYEGaDZY2kKaUdJLRhwq7o9hSHf9vU9LX5s/embed?start=false&loop=false&delayms=3000"
+            imageUrl={imageUrls["ExampleSlideShow.png"]}
+          />
+          <ImageButton
+            slideUrl="https://docs.google.com/presentation/d/e/2PACX-1vRZwx9OSENEgIJfkpJ4M_1ttXGPrBcP6UTxpgGGGi7J4CYEGaDZY2kKaUdJLRhwq7o9hSHf9vU9LX5s/embed?start=false&loop=false&delayms=3000"
+            imageUrl={imageUrls["ExampleSlideShow.png"]}
+          />
+          <ImageButton
+            slideUrl="https://docs.google.com/presentation/d/e/2PACX-1vRZwx9OSENEgIJfkpJ4M_1ttXGPrBcP6UTxpgGGGi7J4CYEGaDZY2kKaUdJLRhwq7o9hSHf9vU9LX5s/embed?start=false&loop=false&delayms=3000"
+            imageUrl={imageUrls["ExampleSlideShow.png"]}
+          />
+          <ImageButton
+            slideUrl="https://docs.google.com/presentation/d/e/2PACX-1vRZwx9OSENEgIJfkpJ4M_1ttXGPrBcP6UTxpgGGGi7J4CYEGaDZY2kKaUdJLRhwq7o9hSHf9vU9LX5s/embed?start=false&loop=false&delayms=3000"
+            imageUrl={imageUrls["ExampleSlideShow.png"]}
+          />
+          <ImageButton
+            slideUrl="https://docs.google.com/presentation/d/e/2PACX-1vRZwx9OSENEgIJfkpJ4M_1ttXGPrBcP6UTxpgGGGi7J4CYEGaDZY2kKaUdJLRhwq7o9hSHf9vU9LX5s/embed?start=false&loop=false&delayms=3000"
+            imageUrl={imageUrls["ExampleSlideShow.png"]}
+          />
         </div>
       </div>
     );