diff options
Diffstat (limited to 'src/lib/review')
| -rw-r--r-- | src/lib/review/api/customerReviewsApi.js | 6 | ||||
| -rw-r--r-- | src/lib/review/components/CustomerReviews.jsx | 62 |
2 files changed, 68 insertions, 0 deletions
diff --git a/src/lib/review/api/customerReviewsApi.js b/src/lib/review/api/customerReviewsApi.js new file mode 100644 index 00000000..1058b72e --- /dev/null +++ b/src/lib/review/api/customerReviewsApi.js @@ -0,0 +1,6 @@ +import odooApi from "@/core/api/odooApi" + +export const getCustomerReviews = async () => { + const response = await odooApi('GET', '/api/v1/customer_review') + return response +}
\ No newline at end of file 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 |