x

apps/spa/src/components/DynamicEditorialCarousel.tsx

@@ -1,5 +1,5 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination } from 'swiper/modules';
+import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import { Link } from 'react-router-dom';
 import type { EditorialCarouselSectionPayload } from '@homaroma/types';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,7 @@ import { getLocalizedField } from '../utils/localization';
 // Import Swiper styles
 import 'swiper/css';
 import 'swiper/css/pagination';
+import 'swiper/css/navigation';
 
 interface DynamicEditorialCarouselProps {
   payload: EditorialCarouselSectionPayload;
@@ -45,8 +46,35 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
     });
   };
 
+  const bgMap: Record<string, string> = {
+    bg: 'bg-pop-bg',
+    black: 'bg-pop-black',
+    pink: 'bg-pop-pink',
+    yellow: 'bg-pop-yellow',
+    orange: 'bg-pop-orange',
+    red: 'bg-pop-red',
+    cyan: 'bg-pop-cyan',
+    green: 'bg-pop-green',
+    purple: 'bg-pop-purple',
+  };
+
+  const textMap: Record<string, string> = {
+    bg: 'text-pop-bg',
+    black: 'text-pop-black',
+    pink: 'text-pop-pink',
+    yellow: 'text-pop-yellow',
+    orange: 'text-pop-orange',
+    red: 'text-pop-red',
+    cyan: 'text-pop-cyan',
+    green: 'text-pop-green',
+    purple: 'text-pop-purple',
+  };
+
+  const bgClass = payload.backgroundColor && bgMap[payload.backgroundColor] ? bgMap[payload.backgroundColor] : 'bg-pop-bg';
+  const textClass = payload.textColor && textMap[payload.textColor] ? textMap[payload.textColor] : 'text-pop-black';
+
   return (
-    <section className="overflow-hidden py-16 md:py-24" style={{ backgroundColor: payload.backgroundColor, color: payload.textColor }}>
+    <section className={`overflow-hidden py-16 md:py-24 ${bgClass} ${textClass}`}>
       <div className="ui-section-inner space-y-12">
         <div className="space-y-3 text-center">
           <h2 className="font-serif text-3xl font-light tracking-wide text-pop-pink md:text-5xl">
@@ -57,7 +85,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
 
         <div className="relative select-none pb-12">
           <Swiper
-            modules={[Autoplay, Pagination]}
+            modules={[Autoplay, Pagination, Navigation]}
             spaceBetween={30}
             slidesPerView={1}
             breakpoints={{
@@ -65,6 +93,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
               1024: { slidesPerView: 3 }
             }}
             pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-pop-pink' }}
+            navigation={true}
             autoplay={{ delay: 5000, disableOnInteraction: false }}
             className="w-full"
           >