1 files changed, 62 insertions, 0 deletions
diff --git a/src/lib/review/components/CustomerReviews.jsx b/src/lib/review/components/CustomerReviews.jsx
new file mode 100644
index 00000000..935d4a3d
--- /dev/null
+++ b/src/lib/review/components/CustomerReviews.jsx
@@ -0,0 +1,62 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import Image from 'next/image'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+const { useQuery } = require('react-query')
+const { getCustomerReviews } = require('../api/customerReviewsApi')
+
+const CustomerReviews = () => {
+  const { data: customerReviews } = useQuery('customerReviews', getCustomerReviews)
+
+  return (
+    <div className='px-4 sm:px-0'>
+      <div className='font-medium sm:text-h-lg mb-4'>Ulasan Konsumen Kami</div>
+
+      <DesktopView>
+        <Swiper slidesPerView={3.2} spaceBetween={16}>
+          {customerReviews &&
+            customerReviews?.map((customerReview) => (
+              <SwiperSlide className='pb-4' key={customerReview.id}>
+                <Card customerReview={customerReview} />
+              </SwiperSlide>
+            ))}
+        </Swiper>
+      </DesktopView>
+
+      <MobileView>
+        <Swiper slidesPerView={1.1} spaceBetween={8}>
+          {customerReviews &&
+            customerReviews?.map((customerReview) => (
+              <SwiperSlide className='pb-4' key={customerReview.id}>
+                <Card customerReview={customerReview} />
+              </SwiperSlide>
+            ))}
+        </Swiper>
+      </MobileView>
+    </div>
+  )
+}
+
+const Card = ({ customerReview }) => (
+  <div className='bg-gray-200 rounded-md px-5 py-6 shadow-md shadow-gray-500/20 h-full'>
+    <div className='flex items-center space-x-3 mb-4'>
+      <Image
+        src={customerReview.image}
+        alt={customerReview.customerName}
+        width={48}
+        height={48}
+        className='rounded-full border border-yellow-400'
+      />
+      <div className='text-body-2 sm:text-body-1 font-semibold leading-6 text-gray-900'>
+        {customerReview.customerName}
+      </div>
+    </div>
+    <div
+      className='leading-7 text-gray-800'
+      dangerouslySetInnerHTML={{ __html: customerReview.ulasan }}
+    />
+  </div>
+)
+
+export default CustomerReviews