commerce/components/checkout/loading-cart.tsx
2024-09-05 00:49:35 -05:00

37 lines
1.2 KiB
TypeScript

import { Separator } from '../ui/separator';
import { Skeleton } from '../ui/skeleton';
export function LoadingCart() {
return (
<div className="space-y-4">
<div className="flex items-center space-x-4">
<Skeleton className="h-20 w-20 rounded-md" />
<div className="flex-grow space-y-2">
<Skeleton className="h-6 w-[200px]" />
</div>
<div className="text-right">
<Skeleton className="ml-auto h-4 w-[50px]" />
<Skeleton className="ml-auto mt-2 h-4 w-[30px]" />
</div>
</div>
<Separator />
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-[100px]" />
<Skeleton className="h-6 w-[50px]" />
</div>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-[80px]" />
<Skeleton className="h-6 w-[100px]" />
</div>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-[80px]" />
<Skeleton className="h-6 w-[90px]" />
</div>
<div className="flex items-center justify-between">
<Skeleton className="h-6 w-[60px]" />
<Skeleton className="h-6 w-[110px]" />
</div>
</div>
);
}