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> ); }