src/components/elements/Skeleton.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
};