60 lines
2.2 KiB
JavaScript
60 lines
2.2 KiB
JavaScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
const ReviewCardItem = () => {
|
|
return (
|
|
<div className="bg-white p-4 rounded-lg flex flex-col gap-4">
|
|
<div className="flex flex-col sm:flex-row flex-1 gap-4">
|
|
{/* Profile image with smaller image overlay */}
|
|
<div className="relative w-fit">
|
|
<Skeleton className="w-[72px] h-[72px] rounded-full" />
|
|
<Skeleton className="w-[36px] h-[36px] rounded-full absolute top-12 bottom-[-6px] right-[-6px]" />
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
{/* Reviewer name and report icon */}
|
|
<div className="flex flex-1 items-center justify-between">
|
|
<Skeleton className="h-5 w-32 rounded-md" />
|
|
<Skeleton className="h-5 w-5 rounded-md" />
|
|
</div>
|
|
|
|
{/* Item name */}
|
|
<Skeleton className="h-4 w-48 mt-1 rounded-md" />
|
|
|
|
{/* Star rating */}
|
|
<div className="mt-1 flex items-center gap-1">
|
|
<Skeleton className="h-6 w-32 rounded-md" />
|
|
</div>
|
|
|
|
{/* Date */}
|
|
<Skeleton className="h-4 w-24 mt-1 rounded-md" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="border-b"></div>
|
|
|
|
{/* Review text */}
|
|
<div>
|
|
<Skeleton className="h-4 w-full rounded-md mb-2" />
|
|
<Skeleton className="h-4 w-full rounded-md" />
|
|
|
|
{/* See More button (optional) */}
|
|
<div className="flex justify-center mt-1">
|
|
<Skeleton className="h-4 w-16 rounded-md" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const MyReviewsCardSkeleton = () => {
|
|
return (
|
|
<div className="mt-[30px] p-2 sm:p-4 bg-muted rounded-xl flex flex-col gap-[30px]">
|
|
{Array(8).fill(0).map((_, index) => (
|
|
<ReviewCardItem key={`review-skeleton-${index}`} />
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MyReviewsCardSkeleton;
|