mirror of
https://github.com/vercel/commerce.git
synced 2025-06-29 18:01:21 +00:00
77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
const CartSkeleton: React.FC = () => {
|
|
return (
|
|
<div className="grid lg:grid-cols-12">
|
|
<div className="lg:col-span-8">
|
|
<div className="flex-1">
|
|
<div className="border-t border-accents-2 mt-10 pt-16 sm:pt-10">
|
|
<div className="animate-cart-pulse flex">
|
|
<div className="w-16 h-16 bg-gray-300" />
|
|
<div className="ml-8 w-1/6 flex flex-col">
|
|
<div className="w-full h-7 bg-gray-300" />
|
|
<div className="w-1/2 h-5 bg-gray-300 mt-4" />
|
|
</div>
|
|
<div className="ml-auto w-24 flex flex-col items-end">
|
|
<div className="w-full h-7 bg-gray-300" />
|
|
<div className="w-1/2 h-5 bg-gray-300 mt-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="sm:border-t border-accents-2 mt-12 sm:mt-10 pt-12 sm:pt-10 ">
|
|
<div
|
|
className="animate-cart-pulse flex"
|
|
style={{
|
|
animationFillMode: 'backwards',
|
|
animationDelay: '225ms',
|
|
}}
|
|
>
|
|
<div className="w-16 h-16 bg-gray-300" />
|
|
<div className="ml-8 w-1/6 flex flex-col">
|
|
<div className="w-full h-7 bg-gray-300" />
|
|
<div className="w-1/2 h-5 bg-gray-300 mt-4" />
|
|
</div>
|
|
<div className="ml-auto w-24 flex flex-col items-end">
|
|
<div className="w-full h-7 bg-gray-300" />
|
|
<div className="w-1/2 h-5 bg-gray-300 mt-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="lg:col-span-4">
|
|
<div className="flex-shrink-0 pt-16 sm:pt-10 sm:pl-16">
|
|
<div className="border-t border-accents-2">
|
|
<ul className="pt-6 pb-7 animate-cart-pulse">
|
|
<li className="flex justify-between">
|
|
<span className="w-16 h-5 bg-gray-300" />
|
|
<span className="w-20 h-5 bg-gray-300" />
|
|
</li>
|
|
<li className="flex justify-between mt-4">
|
|
<span className="w-12 h-5 bg-gray-300" />
|
|
<span className="w-24 h-5 bg-gray-300" />
|
|
</li>
|
|
<li className="flex justify-between mt-4">
|
|
<span className="w-36 h-5 bg-gray-300" />
|
|
<span className="w-12 h-5 bg-gray-300" />
|
|
</li>
|
|
</ul>
|
|
<div className="border-t border-accents-2 font-bold pt-8 mb-10">
|
|
<div
|
|
className="flex justify-between animate-cart-pulse"
|
|
style={{
|
|
animationFillMode: 'backwards',
|
|
animationDelay: '225ms',
|
|
}}
|
|
>
|
|
<div className="w-12 h-5 bg-gray-300" />
|
|
<div className="w-24 h-5 bg-gray-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CartSkeleton
|