✨ Make Rating component accept decimal numbers

Author: Frontendland

src/components/Rating/Rating.astro

@@ -45,11 +45,11 @@ const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
 
 <span class:list={classes} style={styleVariables}>
     {score > 0 && (
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     )}
     {showEmpty && (
         <span class={styles.empty}>
-            {Array(total - score).fill('★').join('')}
+            {Array(total - Math.round(score)).fill('★').join('')}
         </span>
     )}
     {showText && (

src/components/Rating/Rating.svelte

@@ -42,11 +42,11 @@
 
 <span class={classes} style={styleVariables}>
     {#if score}
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     {/if}
     {#if showEmpty}
     <span class={styles.empty}>
-            {Array((total || 5) - score).fill('★').join('')}
+            {Array((total || 5) - Math.round(score)).fill('★').join('')}
         </span>
     {/if}
 

src/components/Rating/Rating.tsx

@@ -43,12 +43,12 @@ const Rating = ({
         <span className={classes} style={styleVariables}>
             {score > 0 && (
                 <span className={styles.score}>
-                    {Array(score).fill('★').join('')}
+                    {Array(Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showEmpty && (
                 <span className={styles.empty}>
-                    {Array(total - score).fill('★').join('')}
+                    {Array(total - Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showText && (

src/pages/rating.astro

@@ -148,6 +148,16 @@ const sections = getSections({
                     <section.component score={5} total={10} />
                 </div>
             </ComponentWrapper>
+
+            <ComponentWrapper title="Decimal rating">
+                <section.component
+                    score={4.8}
+                    showText={true}
+                    reviewCount={123}
+                    reviewLink="/avatar"
+                    reviewTarget="_blank"
+                />
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>