feat: clean up video course cards

Author: wackerow

app/[locale]/developers/_components/VideoCourseCard.tsx

@@ -1,24 +1,20 @@
 import { Image } from "@/components/Image"
-import Link from "@/components/ui/Link"
+import { Card } from "@/components/ui/card"
 import { Tag } from "@/components/ui/tag"
 
 import { cn } from "@/lib/utils/cn"
 
 import type { VideoCourse } from "../types"
 
-type BuildCardProps = {
+type VideoCourseCardProps = {
   course: VideoCourse
   className?: string
 }
 
-const VideoCourseCard = ({ course, className }: BuildCardProps) => (
-  <Link
+const VideoCourseCard = ({ course, className }: VideoCourseCardProps) => (
+  <Card
     href={course.href}
-    className={cn(
-      "group flex h-full w-fit flex-col gap-4 rounded-4xl no-underline",
-      className
-    )}
-    hideArrow
+    className={cn("group h-full w-fit rounded-4xl no-underline", className)}
   >
     <div className="h-fit w-full overflow-hidden rounded-2xl">
       <Image
@@ -32,16 +28,17 @@ const VideoCourseCard = ({ course, className }: BuildCardProps) => (
       <Tag
         status="warning"
         size="small"
-        className="mb-0 rounded-[4px] px-1 py-px font-bold normal-case"
+        className="mb-2 mt-4 rounded-[4px] px-1 py-0 font-bold normal-case"
       >
+        {/* // TODO: Extract intl */}
         {Math.round(course.hours)}-hour course
       </Tag>
-      <h3 className="groupfont-bold text-lg text-body group-hover:underline">
+      <h3 className="text-lg font-bold text-body group-hover:underline">
         {course.title}
       </h3>
       <p className="mb-4 text-sm text-body-medium">{course.description}</p>
     </div>
-  </Link>
+  </Card>
 )
 
 export default VideoCourseCard

app/[locale]/developers/_components/VideoCourseSwiper/index.tsx

@@ -5,40 +5,21 @@ import { Swiper, SwiperSlide } from "@/components/ui/swiper"
 import type { VideoCourse } from "../../types"
 import VideoCourseCard from "../VideoCourseCard"
 
-import { useBreakpointValue } from "@/hooks/useBreakpointValue"
-
 type VideoCourseSwiperProps = {
   courses: VideoCourse[]
 }
 
-const VideoCourseSwiper = ({ courses }: VideoCourseSwiperProps) => {
-  const slidesPerView = useBreakpointValue({
-    base: 1.25,
-    sm: 1.6,
-    md: 2.7,
-    lg: 4.4,
-    xl: 5,
-  })
-  const spaceBetween = useBreakpointValue({
-    base: 16,
-    sm: 12,
-    md: 16,
-    lg: 24,
-    xl: 32,
-  })
-
-  return (
-    <Swiper spaceBetween={spaceBetween} slidesPerView={slidesPerView}>
-      {courses.map((course, idx) => (
-        <SwiperSlide
-          key={idx}
-          className="max-xl:first:ms-8 max-xl:[&:last-child_div]:pe-16"
-        >
-          <VideoCourseCard course={course} />
-        </SwiperSlide>
-      ))}
-    </Swiper>
-  )
-}
+const VideoCourseSwiper = ({ courses }: VideoCourseSwiperProps) => (
+  <Swiper spaceBetween={16} slidesPerView={1.25}>
+    {courses.map((course, idx) => (
+      <SwiperSlide
+        key={idx}
+        className="max-xl://[&:last-child_div]:pe-16 max-2xl:first:ms-8 max-2xl:last:pe-16"
+      >
+        <VideoCourseCard course={course} />
+      </SwiperSlide>
+    ))}
+  </Swiper>
+)
 
 export default VideoCourseSwiper

app/[locale]/developers/_components/VideoCourseSwiper/loading.tsx

@@ -1,5 +1,9 @@
 import { SkeletonCardGrid } from "@/components/ui/skeleton"
 
-const Loading = () => <SkeletonCardGrid />
+const Loading = () => (
+  <div className="px-8">
+    <SkeletonCardGrid />
+  </div>
+)
 
 export default Loading

app/[locale]/developers/page.tsx

@@ -45,6 +45,21 @@ const RightColumn = (props: ChildOnlyProp) => (
   <div className="mb-6 me-0 w-full flex-1 basis-1/3" {...props} />
 )
 
+const Scroller = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn(
+        "relative flex w-screen gap-6 overflow-x-auto pb-2 max-2xl:-mx-8 max-2xl:px-8 max-sm:hidden lg:gap-8 2xl:w-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
 const DevelopersPage = async ({
   params,
 }: {
@@ -243,20 +258,20 @@ const DevelopersPage = async ({
           </Card>
         </Section>
 
-        <Section id="courses" className="space-y-4 py-10 md:py-12">
+        <Section id="courses" className="space-y-4 py-6">
           <h2>{t("page-developers-video-courses-title")}</h2>
           <p>{t("page-developers-video-courses-desc")}</p>
 
           {/* DESKTOP */}
-          <div className="flex w-screen gap-6 overflow-x-auto max-2xl:-mx-8 max-2xl:pe-8 max-sm:hidden lg:gap-8 2xl:w-full">
+          <Scroller>
             {courses.map((course, idx) => (
               <VideoCourseCard
                 key={idx}
                 course={course}
-                className="w-[20%] min-w-[240px] max-w-[271px] max-2xl:first:ms-8"
+                className="w-[20%] max-w-[271px] flex-1 max-2xl:min-w-[20rem] xl:w-full"
               />
             ))}
-          </div>
+          </Scroller>
 
           {/* MOBILE */}
           <div className="w-screen max-xl:-ms-8 sm:hidden xl:w-full">