diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-31 16:30:13 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-31 16:30:13 +0700 |
| commit | ad46d122029999b7639657936068c4643f3572eb (patch) | |
| tree | 417aa969813fbd36ac6fac49b755ec642ce8c547 /src/components/products | |
| parent | 49198fed8da2ab476bebc2233907063b02de0d66 (diff) | |
Product skeleton
Diffstat (limited to 'src/components/products')
| -rw-r--r-- | src/components/products/ProductSlider.js | 31 |
1 files changed, 3 insertions, 28 deletions
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js index cf663995..4cc98eb7 100644 --- a/src/components/products/ProductSlider.js +++ b/src/components/products/ProductSlider.js @@ -1,9 +1,9 @@ import { Swiper, SwiperSlide } from "swiper/react"; import ProductCard from "./ProductCard"; -import ImagePlaceholderIcon from "../../icons/image-placeholder.svg"; import "swiper/css"; import Image from "../elements/Image"; import Link from "../elements/Link"; +import { SkeletonProduct } from "../elements/Skeleton"; export default function ProductSlider({ products, @@ -12,7 +12,7 @@ export default function ProductSlider({ return ( <> { bannerMode && ( - <Image src={products.image} alt={products.name} className="absolute top-0 left-0 h-full max-w-[55%]" /> + <Image src={products.banner.image} alt={products.banner.name} className="absolute top-0 left-0 h-full max-w-[55%]" /> ) } <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8}> { bannerMode && ( @@ -26,32 +26,7 @@ export default function ProductSlider({ </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> - ) : ''} + { !products ? <SkeletonProduct /> : ''} </> ) }
\ No newline at end of file |