From 9bfe2fc7000a051ca480b4c4fd5fe09b1afe285e Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Mon, 10 Mar 2025 23:25:27 +0700
Subject: [PATCH] fix: google review text styling

---
 src/components/Blocks/GoogleReviews/GoogleReviews.tsx | 4 ++--
 src/components/Ratings/CardStarRating.tsx             | 7 ++++---
 src/utils/general.ts                                  | 3 +++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Blocks/GoogleReviews/GoogleReviews.tsx b/src/components/Blocks/GoogleReviews/GoogleReviews.tsx
index 2dee614..d0ff036 100644
--- a/src/components/Blocks/GoogleReviews/GoogleReviews.tsx
+++ b/src/components/Blocks/GoogleReviews/GoogleReviews.tsx
@@ -32,9 +32,9 @@ export function GoogleReviews({ data }: GoogleReviewProps) {
         <div className="flex justify-center items-center space-x-2">
           <h2 className="text-xl text-center font-bol mt-[15px]">{data.ratingValue}</h2>
           <div className="mt-1">
-            <StarRating size={20} value={data.ratingValue} />
+            <StarRating size={30} value={data.ratingValue} />
           </div>
-          <div className="text-xs font-medium">Over {data.totalRating} Reviews</div>
+          <div className="font-medium">Over {data.totalRating} Reviews</div>
         </div>
 
         <div className="mt-20 relative">
diff --git a/src/components/Ratings/CardStarRating.tsx b/src/components/Ratings/CardStarRating.tsx
index 45fe257..5037534 100644
--- a/src/components/Ratings/CardStarRating.tsx
+++ b/src/components/Ratings/CardStarRating.tsx
@@ -1,5 +1,6 @@
 import Image from "next/image";
 import StarRating from "./StarRating";
+import { limitString } from "@/utils/general";
 
 export interface CardStarRatingProps {
   data: {
@@ -12,10 +13,10 @@ export function CardStarRating({ data }: CardStarRatingProps) {
   return (
     <div className="bg-white p-2 rounded-lg shadow-md">
       <div className="flex justify-between">
-        <StarRating size={20} value={data.star} />
-        <Image src="/assets/images/google-provider.svg" width={20} height={20} alt="" />
+        <StarRating size={30} value={data.star} />
+        <Image src="/assets/images/google-provider.svg" width={30} height={30} alt="" />
       </div>
-      <p className="text-xs pl-1 mt-4">{data.description}</p>
+      <p className="p-1 mt-4 text-[22px]">{limitString(data.description)}</p>
     </div>
   );
 }
diff --git a/src/utils/general.ts b/src/utils/general.ts
index e69de29..8623424 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -0,0 +1,3 @@
+export function limitString(text: string) {
+  return `${text.length > 100 ? `${text.slice(0, 100)}...` : text}`;
+}