gpatruno
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import type { GoogleReviewsSummary } from "@/lib/google-reviews";
|
|
import { ReviewStars } from "./ReviewStars";
|
|
import { ReviewsCarousel } from "./ReviewsCarousel";
|
|
|
|
function formatRating(rating: number) {
|
|
return rating.toLocaleString("fr-FR", {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
});
|
|
}
|
|
|
|
function formatReviewCount(count: number) {
|
|
return count.toLocaleString("fr-FR");
|
|
}
|
|
|
|
export function ReviewsSection({ data }: { data: GoogleReviewsSummary }) {
|
|
const { rating, reviewCount, googleMapsUri, reviews } = data;
|
|
|
|
return (
|
|
<section
|
|
id="avis"
|
|
className="scroll-mt-24 border-t border-chocolat/8 bg-cream px-4 py-20 sm:px-6"
|
|
>
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="mb-12 text-center">
|
|
<h2 className="text-3xl font-bold text-chocolat sm:text-4xl">
|
|
Avis clients
|
|
</h2>
|
|
<p className="mx-auto mt-3 max-w-2xl text-muted">
|
|
Ce que disent nos clients sur Google.
|
|
</p>
|
|
{rating != null ? (
|
|
<div className="mt-5 flex flex-wrap items-center justify-center gap-3">
|
|
<span className="text-3xl font-bold text-chocolat">
|
|
{formatRating(rating)}
|
|
</span>
|
|
<ReviewStars rating={rating} />
|
|
{reviewCount != null ? (
|
|
<span className="text-sm text-muted">
|
|
({formatReviewCount(reviewCount)} avis)
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<ReviewsCarousel reviews={reviews} />
|
|
|
|
<div className="mt-10 flex flex-col items-center gap-3 text-center">
|
|
<a
|
|
href={googleMapsUri}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 rounded-full bg-gaufre px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_24px_-8px_rgba(243,156,18,0.55)] transition hover:bg-gaufre/90"
|
|
>
|
|
Voir tous les avis sur Google
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|