diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-17 17:07:50 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-17 17:07:50 +0700 |
| commit | f99e0aba70efad0deb907d8e27f09fc9f527c8a4 (patch) | |
| tree | f0ac96e4e736a1d385e32553f0e641ee27e11fd3 /src2/components/elements/Skeleton.js | |
| parent | 90e1edab9b6a8ccc09a49fed3addbec2cbc4e4c3 (diff) | |
Refactor
Diffstat (limited to 'src2/components/elements/Skeleton.js')
| -rw-r--r-- | src2/components/elements/Skeleton.js | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/src2/components/elements/Skeleton.js b/src2/components/elements/Skeleton.js new file mode 100644 index 00000000..fbdbc245 --- /dev/null +++ b/src2/components/elements/Skeleton.js @@ -0,0 +1,48 @@ +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) => ( + <div className="flex items-center justify-between" key={i}> + <div> + <div className="h-2.5 bg-gray-300 rounded-full w-24 mb-2.5"></div> + <div className="w-32 h-2 bg-gray-200 rounded-full"></div> + </div> + <div className="h-2.5 bg-gray-300 rounded-full w-12"></div> + </div> + )) } + <span className="sr-only">Loading...</span> + </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, + SkeletonProduct +};
\ No newline at end of file |