diff options
| author | IT Fixcomart <it@fixcomart.co.id> | 2022-11-04 11:40:55 +0700 |
|---|---|---|
| committer | IT Fixcomart <it@fixcomart.co.id> | 2022-11-04 11:40:55 +0700 |
| commit | c5dace224323287f927ba352712743fe2eaca241 (patch) | |
| tree | e25836c8c3bfb9a71e5fe4b42814398df2f650ab /src/components | |
| parent | e93103fa78d610737e56b1b99056acdd84a9adde (diff) | |
Add popular product and ready stock product in home
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/ProductCard.js | 5 | ||||
| -rw-r--r-- | src/components/product/ProductSlider.js | 44 |
2 files changed, 49 insertions, 0 deletions
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index 250a5c7d..360e11ff 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -32,6 +32,11 @@ export default function ProductCard({ data }) { </div> ) : ''} <p className="text-sm text-gray-900 font-semibold">{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}</p> + {product.stock_total > 0 ? ( + <div className="badge-yellow bg-green-200 text-green-700 w-fit mt-2">Ready Stock</div> + ) : ( + <div className="h-6"></div> + )} </div> </div> </div> diff --git a/src/components/product/ProductSlider.js b/src/components/product/ProductSlider.js new file mode 100644 index 00000000..26584d8a --- /dev/null +++ b/src/components/product/ProductSlider.js @@ -0,0 +1,44 @@ +import { Swiper, SwiperSlide } from "swiper/react"; +import ProductCard from "../ProductCard"; +import ImagePlaceholderIcon from "../../icons/image-placeholder.svg"; +import "swiper/css"; + +export default function ProductSlider({ products }) { + return ( + <> + <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8}> + {products?.products?.map((product, index) => ( + <SwiperSlide key={index}> + <ProductCard data={product} /> + </SwiperSlide> + ))} + </Swiper> + {products == null ? ( + <div className="grid grid-cols-2 gap-x-4"> + <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6"> + <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded"> + <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" /> + </div> + <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div> + <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div> + <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div> + <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div> + <div className="h-2 bg-gray-200 rounded-full"></div> + <span className="sr-only">Loading...</span> + </div> + <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6"> + <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded"> + <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" /> + </div> + <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div> + <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div> + <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div> + <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div> + <div className="h-2 bg-gray-200 rounded-full"></div> + <span className="sr-only">Loading...</span> + </div> + </div> + ) : ''} + </> + ) +}
\ No newline at end of file |