refactor: explode ui/swiper into compossible parts

migrates global.css styling into component

Author: wackerow

src/components/ui/swiper.tsx

@@ -12,6 +12,8 @@ import { ChevronNext, ChevronPrev } from "@/components/Chevron"
 
 import { cn } from "@/lib/utils/cn"
 
+import { Button, type ButtonProps } from "./buttons/Button"
+
 import "swiper/css"
 import "swiper/css/navigation"
 import "swiper/css/pagination"
@@ -25,24 +27,100 @@ const SwiperContainer = React.forwardRef<
 ))
 SwiperContainer.displayName = "SwiperContainer"
 
+const SwiperNavButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => (
+    <Button
+      ref={ref}
+      variant="ghost"
+      className={cn("px-2", className)}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+)
+SwiperNavButton.displayName = "SwiperNavButton"
+
+const SwiperNextButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => (
+    <SwiperNavButton
+      ref={ref}
+      className={cn("ui-swiper-button-next", className)}
+      {...props}
+    >
+      {children || <ChevronNext />}
+    </SwiperNavButton>
+  )
+)
+SwiperNextButton.displayName = "SwiperNextButton"
+
+const SwiperPrevButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => (
+    <SwiperNavButton
+      ref={ref}
+      className={cn("ui-swiper-button-prev", className)}
+      {...props}
+    >
+      {children || <ChevronPrev />}
+    </SwiperNavButton>
+  )
+)
+SwiperPrevButton.displayName = "SwiperPrevButton"
+
+const SwiperPaginationDots = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "ui-swiper-pagination flex w-fit flex-row",
+      "[&_.swiper-pagination-bullet]:bg-primary-high-contrast",
+      "[&_.swiper-pagination-bullet-active]:bg-primary-hover",
+      className
+    )}
+    {...props}
+  />
+))
+SwiperPaginationDots.displayName = "SwiperPaginationDots"
+
+const SwiperNavContainer = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "mx-auto mt-6 flex h-6 w-fit items-center gap-4 rounded-full bg-background-highlight",
+      className
+    )}
+    {...props}
+  />
+))
+SwiperNavContainer.displayName = "SwiperNavContainer"
+
 type SwiperProps = SwiperReactProps & {
+  navigation?: React.ReactNode
   children: React.ReactNode[]
 }
 const Swiper = React.forwardRef<SwiperRef, SwiperProps>(
-  ({ children, ...props }, ref) => {
+  ({ children, navigation, ...props }, ref) => {
     const { t } = useTranslation("common")
     return (
       <SwiperReact
         ref={ref}
         navigation={{
-          nextEl: ".swiper-button-next",
-          prevEl: ".swiper-button-prev",
+          nextEl: ".ui-swiper-button-next",
+          prevEl: ".ui-swiper-button-prev",
         }}
         a11y={{
           prevSlideMessage: t("previous"),
           nextSlideMessage: t("next"),
         }}
-        pagination={{ clickable: true, el: ".swiper-pagination" }}
+        pagination={{
+          clickable: true,
+          el: ".ui-swiper-pagination",
+        }}
         keyboard
         modules={[Navigation, Pagination, Keyboard, EffectCards]}
         slidesPerView={1}
@@ -54,14 +132,25 @@ const Swiper = React.forwardRef<SwiperRef, SwiperProps>(
         {children.map((child, index) => (
           <SwiperSlide key={index}>{child}</SwiperSlide>
         ))}
-
-        <ChevronPrev className="swiper-button-prev" />
-        <div className="swiper-pagination" />
-        <ChevronNext className="swiper-button-next" />
+        {navigation || (
+          <SwiperNavContainer>
+            <SwiperPrevButton />
+            <SwiperPaginationDots />
+            <SwiperNextButton />
+          </SwiperNavContainer>
+        )}
       </SwiperReact>
     )
   }
 )
 Swiper.displayName = "Swiper"
 
-export { Swiper, SwiperContainer }
+export {
+  Swiper,
+  SwiperContainer,
+  SwiperNavButton,
+  SwiperNavContainer,
+  SwiperNextButton,
+  SwiperPaginationDots,
+  SwiperPrevButton,
+}

src/styles/global.css

@@ -167,69 +167,6 @@
   }
 }
 
-@layer components {
-  .swiper-horizontal > .swiper-pagination-bullets,
-  .swiper-pagination-bullets.swiper-pagination-horizontal {
-    @apply bg-background-highlight;
-  }
-
-  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
-    @apply !relative;
-  }
-
-  .swiper-pagination {
-    @apply relative mx-auto mt-8 flex h-[26px] max-w-48 items-center justify-center rounded-full bg-background-highlight;
-  }
-
-  .css-posts-swiper .swiper-pagination {
-    @apply max-w-52 sm:max-w-40 lg:max-w-36;
-  }
-
-  .swiper-pagination .swiper-pagination-bullet {
-    @apply bg-primary-high-contrast;
-  }
-
-  .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal
-    .swiper-pagination-bullet-active {
-    @apply bg-primary-hover;
-  }
-
-  .swiper-button-prev,
-  .swiper-button-next {
-    @apply !h-6 !w-fit fill-primary px-2;
-  }
-}
-
-.swiper-button-prev,
-.swiper-button-next {
-  top: calc(100% - 11px) !important;
-  --nav-inset: calc(50% - 6.5rem);
-}
-
-@media (min-width: theme("screens.sm")) {
-  .swiper-button-prev,
-  .swiper-button-next {
-    --nav-inset: calc(50% - 5rem);
-  }
-}
-
-@media (min-width: theme("screens.lg")) {
-  .swiper-button-prev,
-  .swiper-button-next {
-    --nav-inset: calc(50% - 4.5rem);
-  }
-}
-
-.swiper-button-next {
-  inset-inline-end: var(--nav-inset) !important;
-  inset-inline-start: auto !important;
-}
-
-.swiper-button-prev {
-  inset-inline-end: auto !important;
-  inset-inline-start: var(--nav-inset) !important;
-}
-
 .swiper-slide-shadow {
   background: transparent !important;
 }