diff --git a/src/components/CustomBottomSheet/RateBottomSheet.tsx b/src/components/CustomBottomSheet/RateBottomSheet.tsx index 3ee8b37..611644c 100644 --- a/src/components/CustomBottomSheet/RateBottomSheet.tsx +++ b/src/components/CustomBottomSheet/RateBottomSheet.tsx @@ -52,7 +52,13 @@ export function RateBottomSheet() { // Calculate which part of the star was clicked // Divide star into 4 parts: 0-25% = 0.25, 25-50% = 0.5, 50-75% = 0.75, 75-100% = 1.0 - const clickPercentage = clickX / starWidth; + let clickPercentage = clickX / starWidth; + + // In RTL mode, invert the click percentage since stars are displayed in reverse + if (isRTL) { + clickPercentage = 1 - clickPercentage; + } + let starValue = 0; if (clickPercentage <= 0.25) { @@ -179,7 +185,7 @@ export function RateBottomSheet() { style={{ position: "absolute", top: 0, - left: 0, + ...(isRTL ? { right: 0 } : { left: 0 }), width: `${fillPercentage}%`, height: "100%", overflow: "hidden", @@ -194,7 +200,7 @@ export function RateBottomSheet() { style={{ position: "absolute", top: 0, - left: 0, + ...(isRTL ? { right: 0 } : { left: 0 }), width: 40, height: 40, }}