[#1] Remove carousel

web/src/components/AutoCarousel/AutoCarousel.tsx

@@ -1,56 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
-
-const SCROLL_INTERVAL_SECONDS = 3
-
-interface AutoCarouselProps {
-  images: string[]
-}
-
-const AutoCarousel = ({ images }: AutoCarouselProps) => {
-  const [activeItem, setActiveItem] = useState<number>(0)
-  const ref = useRef<HTMLDivElement>(null)
-
-  const scroll = useCallback(() => {
-    setActiveItem((prev) => {
-      if (images.length - 1 > prev) return prev + 1
-      else return 0
-    })
-  }, [images.length])
-
-  const autoScroll = useCallback(
-    () => setInterval(scroll, SCROLL_INTERVAL_SECONDS * 1000),
-    [scroll]
-  )
-
-  useEffect(() => {
-    const play = autoScroll()
-    return () => clearInterval(play)
-  }, [autoScroll])
-
-  useEffect(() => {
-    const width = ref.current?.getBoundingClientRect().width
-    ref.current?.scroll({ left: activeItem * (width || 0) })
-  }, [activeItem])
-
-  return (
-    <div
-      ref={ref}
-      className="carousel carousel-center p-2 space-x-2 rounded-box"
-    >
-      {images.map((image, i) => (
-        <div
-          key={i}
-          className="carousel-item w-full h-fit my-auto justify-center"
-        >
-          <img
-            src={image}
-            alt={`${i}`}
-            className="object-contain rounded-xl size-fit"
-          />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default AutoCarousel

web/src/components/Project/AdminProject/AdminProject.tsx

@@ -87,7 +87,7 @@ const AdminProject = ({ project }: Props) => {
                         key={i}
                         href={image}
                         target="_blank"
-                        className="btn btn-sm btn-square"
+                        className={`btn btn-sm btn-square ${i === 0 && 'btn-primary'}`}
                         rel="noreferrer"
                       >
                         {i + 1}

web/src/components/Project/ProjectForm/ProjectForm.tsx

@@ -242,7 +242,14 @@ const ProjectForm = (props: ProjectFormProps) => {
                       <img src={fileId} alt={i.toString()} />
                     </figure>
                     <div className="card-body p-2 rounded-xl">
-                      <div className="card-actions rounded-md justify-end">
+                      <div
+                        className={`card-actions rounded-md ${i === 0 ? 'justify-between' : 'justify-end'}`}
+                      >
+                        {i === 0 && (
+                          <div className="btn btn-sm shadow-xl no-animation">
+                            Cover Image
+                          </div>
+                        )}
                         <button
                           type="button"
                           className="btn btn-square btn-sm btn-error shadow-xl"

web/src/components/Project/ProjectsShowcase/ProjectsShowcase.tsx

@@ -6,7 +6,6 @@ import { FindProjects } from 'types/graphql'
 
 import { Link, routes } from '@redwoodjs/router'
 
-import AutoCarousel from 'src/components/AutoCarousel/AutoCarousel'
 import { calculateLuminance } from 'src/lib/color'
 
 const CARD_WIDTH = 384
@@ -51,7 +50,11 @@ const ProjectsShowcase = ({ projects }: FindProjects) => {
             <Link key={`${i}-${j}`} to={routes.project({ id: project.id })}>
               <div className="card card-compact bg-base-100 w-96 h-fit shadow-xl transition-all hover:-translate-y-1 hover:shadow-2xl">
                 {project.images.length > 0 && (
-                  <AutoCarousel images={project.images} />
+                  <img
+                    src={project.images[0]}
+                    alt={`${i}`}
+                    className="object-contain rounded-box size-fit p-2"
+                  />
                 )}
                 <div className="card-body">
                   <div className="card-title overflow-auto">