28 lines
1.1 KiB
JavaScript
28 lines
1.1 KiB
JavaScript
import { Skeleton } from 'components'
|
|
|
|
export default function ProductSkeleton() {
|
|
return (
|
|
<div className="sm:grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
|
|
<Skeleton count={10}>
|
|
<Skeleton.Items className="pt-2 pb-3 border-b border-gray-100 sm:h-[540px] xl:h-[470px] sm:px-3 flex items-center gap-4 sm:flex-col sm:space-x-4">
|
|
<Skeleton.Item
|
|
height="h-[216px]"
|
|
width="w-[26vw] sm:w-56"
|
|
animated="background"
|
|
className="rounded-md sm:mb-8"
|
|
/>
|
|
<div className="flex-1 space-y-5 sm:w-full">
|
|
<Skeleton.Item height="h-5" width="w-64" animated="background" />
|
|
<Skeleton.Item height="h-5" width="w-60" animated="background mb-auto" />
|
|
<Skeleton.Item height="h-5" width="w-28" animated="background" />
|
|
<div className="flex justify-between">
|
|
<Skeleton.Item height="h-5" width="w-20" animated="background" />
|
|
<Skeleton.Item height="h-5" width="w-20" animated="background" />
|
|
</div>
|
|
</div>
|
|
</Skeleton.Items>
|
|
</Skeleton>
|
|
</div>
|
|
)
|
|
}
|