diff options
Diffstat (limited to 'src/components/elements')
| -rw-r--r-- | src/components/elements/Skeleton.js | 32 |
1 files changed, 31 insertions, 1 deletions
diff --git a/src/components/elements/Skeleton.js b/src/components/elements/Skeleton.js index 0a0bbc78..fbdbc245 100644 --- a/src/components/elements/Skeleton.js +++ b/src/components/elements/Skeleton.js @@ -1,3 +1,5 @@ +import ImagePlaceholderIcon from "../../icons/image-placeholder.svg"; + const SkeletonList = ({ number }) => ( <div role="status" className="space-y-6 animate-pulse"> { Array.from(Array(number), (e, i) => ( @@ -13,6 +15,34 @@ const SkeletonList = ({ number }) => ( </div> ); +const SkeletonProduct = () => ( + <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> +); + export { - SkeletonList + SkeletonList, + SkeletonProduct };
\ No newline at end of file |