this repo has no description
1import { connection } from 'next/server';
2import type { Review } from '#/types/review';
3import { ProductReviewCard } from '#/components/product-review-card';
4import { delayReviews, withDelay } from '#/lib/delay';
5import { getReviews } from '#/lib/reviews';
6
7export async function Reviews() {
8 // Tell Next.js to render dynamically at runtime instead of build-time
9 await connection();
10
11 let reviews: Review[] = await withDelay(
12 getReviews().then((res) => res.json()),
13 delayReviews,
14 );
15
16 return (
17 <div className="space-y-6">
18 <div className="text-lg font-medium text-white">Customer Reviews</div>
19 <div className="space-y-8">
20 {reviews.map((review) => {
21 return <ProductReviewCard key={review.id} review={review} />;
22 })}
23 </div>
24 </div>
25 );
26}
27
28const shimmer = `relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent`;
29
30function Skeleton() {
31 return (
32 <div className="space-y-4">
33 <div className="h-6 w-2/6 rounded-lg bg-gray-900" />
34 <div className="h-4 w-1/6 rounded-lg bg-gray-900" />
35 <div className="h-4 w-full rounded-lg bg-gray-900" />
36 <div className="h-4 w-4/6 rounded-lg bg-gray-900" />
37 </div>
38 );
39}
40
41export function ReviewsSkeleton() {
42 return (
43 <div className="space-y-6" data-testid="reviews-loader">
44 <div className={`h-7 w-2/5 rounded-lg bg-gray-900 ${shimmer}`} />
45 <div className="space-y-8">
46 <Skeleton />
47 <Skeleton />
48 </div>
49 </div>
50 );
51}