Changed events and clubs to scrolling instead of buttons

UTDNebula · Oct 22, 2024 · ca9838c · ca9838c
1 parent 213d365
commit ca9838c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 43 deletions.
diff --git a/src/components/CommunityEvents.tsx b/src/components/CommunityEvents.tsx
@@ -39,11 +39,16 @@ const CommunityEvents = ({ events }: Props) => {
   }
   return (
     <div
-      className="group flex w-full flex-col items-center space-y-7.5 pt-4 sm:items-start"
+      className="group flex flex-row overflow-x-auto place-content-start items-center pt-4 sm:items-start"
       data-view={'list'}
     >
       {events.map((event) => (
-        <EventCard key={event.id} event={event} />
+
+        // let's see if this works        
+        <div className="flex flex-shrink-0 items-center pr-4">
+          <EventCard key={event.id} event={event} />
+        </div>
+
       ))}
     </div>
   );

diff --git a/src/components/OrgDirectoryCarousel.tsx b/src/components/OrgDirectoryCarousel.tsx
@@ -13,55 +13,16 @@ type Props = {
 };
 
 const OrgDirectoryCarousel: FC<Props> = ({ clubs, session }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const clubCard = useRef(null);
-  const clubCardElement: HTMLDivElement = clubCard.current!;
-  let clubCardWidth = 0;
-  if (clubCardElement) {
-    clubCardWidth = clubCardElement.scrollWidth;
-  }
-
-  function prev() {
-    setCurrentIndex(currentIndex - 1);
-  }
-
-  function next() {
-    setCurrentIndex(currentIndex + 1);
-  }
-
   if (session) {
     return (
       <div className="carousel-container relative flex w-full flex-col">
-        {
-          <div className="buttons flex justify-between pb-8 pt-4">
-            {currentIndex > 0 && (
-              <button
-                onClick={prev}
-                className="left-arrow absolute left-0 bg-white p-2"
-              >
-                <LeftArrowIcon fill={'black'} />
-              </button>
-            )}
-            {currentIndex < clubs.length - 1 && (
-              <button
-                onClick={next}
-                className="right-arrow absolute right-0 bg-white p-2"
-              >
-                <RightArrowIcon fill={'black'} />
-              </button>
-            )}
-          </div>
-        }
         <div className="carousel-wrapper relative flex w-full">
           <div className="carousel-content-wrapper h-full w-full overflow-hidden">
             <div
-              className="carousel-content flex w-full flex-shrink-0 flex-grow transition duration-500 ease-in-out"
-              style={{
-                transform: `translateX(-${currentIndex * clubCardWidth}px)`,
-              }}
+              className="carousel-content flex w-full flex-shrink-0 flex-grow overflow-x-auto"
             >
               {clubs.map((club) => (
-                <div className="py-8 pr-8" key={club.id} ref={clubCard}>
+                <div className="py-8 pr-8" key={club.id}>
                   <ClubCard
                     key={club.id}
                     club={club}