d9430335d5
Fix imports, remove unnecessary imports, and replace all single apostrophe to double apostrophes
54 lines
1.7 KiB
Plaintext
54 lines
1.7 KiB
Plaintext
---
|
|
import { markdownToHtml } from "@/lib/markdown";
|
|
import StarRating from "./subcomponents/StarRating.astro";
|
|
|
|
interface Props {
|
|
reviews: ReviewListComponent;
|
|
}
|
|
|
|
const reviews = Astro.props.reviews;
|
|
|
|
let totalStars: number = 0;
|
|
const totalReviews: number = reviews.reviews.length;
|
|
|
|
reviews.reviews.forEach((review) => {
|
|
totalStars = totalStars + review.stars;
|
|
});
|
|
|
|
const averageStars = Math.round((totalStars / totalReviews) * 10) / 10;
|
|
const reviewsToShow = reviews.reviews.slice(0, 5);
|
|
---
|
|
|
|
<div
|
|
id={`reviews-${reviews.id}`}
|
|
class="flex lg:flex-row flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
|
|
>
|
|
<div class="flex flex-col lg:gap-5 gap-2.25 lg:min-w-[32.5%]">
|
|
<div class="flex flex-col">
|
|
<h2 class="text-3xl font-bold">{reviews.title}</h2>
|
|
<div>{reviews.text}</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5 text-lg">
|
|
<StarRating size="big" stars={averageStars} />
|
|
<p class="italic">{averageStars}</span> stars out of {totalReviews} {totalReviews === 1 ? "review" : "reviews"}.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-6.5">
|
|
{ reviewsToShow.map((review) => (
|
|
<div class="flex flex-col justify-center gap-3 bg-neutral-100 py-4 px-5.5 rounded-2xl shadow-sm">
|
|
<div class="flex flex-col justify-center gap-1.25">
|
|
<h4 class="text-2xl font-semibold">{review.name}</h4>
|
|
<div>
|
|
<StarRating size="small" stars={review.stars} />
|
|
</div>
|
|
</div>
|
|
|
|
<div set:html={markdownToHtml(review.review)}>
|
|
</div>
|
|
</div>
|
|
)) }
|
|
</div>
|
|
</div>
|