✨ Add Rating components for Svelte & React

Author: Frontendland

src/components/Rating/Rating.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import type { RatingProps } from './rating'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+    
+    import './rating.scss'
+    
+    export let score: RatingProps['score']
+    export let total: RatingProps['total'] = 5
+    export let showText: RatingProps['showText'] = false
+    export let text: RatingProps['text'] = '{0} out of {1}'
+    export let showEmpty: RatingProps['showEmpty'] = true
+    export let outline: RatingProps['outline'] = true
+    export let reviewCount: RatingProps['reviewCount'] = 0
+    export let reviewText: RatingProps['reviewText'] = '{0} reviews'
+    export let reviewLink: RatingProps['reviewLink'] = ''
+    export let reviewTarget: RatingProps['reviewTarget'] = ''
+    export let color: RatingProps['color'] = ''
+    export let emptyColor: RatingProps['emptyColor'] = ''
+    export let size: RatingProps['size'] = 0
+    export let className: RatingProps['className'] = ''
+    
+    const classes = [
+        'w-rating',
+        outline && 'outline',
+        className
+    ].filter(Boolean).join(' ')
+    
+    const styles = [
+        color && `--w-rating-color: ${color};`,
+        size && `--w-rating-size: ${size}px;`,
+        emptyColor && `--w-rating-empty-color: ${emptyColor};`
+    ].filter(Boolean).join(' ')
+    
+    const translatedText = text!
+        .replace('{0}', `${score}`)
+        .replace('{1}', `${total}`)
+    
+    const translatedReviewText = reviewText?.replace('{0}', `${reviewCount}`)
+</script>
+
+
+<span class={classes} style={styles || null}>
+    <span class="score">{Array(score).fill('★').join('')}</span>
+    {#if showEmpty}
+        <span
+            class="empty"
+            class:ten-star={total === 10}
+        >
+            {Array((total || 5) - score).fill('★').join('')}
+        </span>
+    {/if}
+
+    {#if showText}
+        <span class="text" class:m={reviewCount}>
+            {translatedText}
+        </span>
+    {/if}
+
+    {#if reviewCount}
+        {'•'}
+        <ConditionalWrapper
+            condition={!!reviewLink}
+            element="a"
+            href={reviewLink}
+            target={reviewTarget}
+        >
+            <span class="text">{translatedReviewText}</span>
+        </ConditionalWrapper>
+    {/if}
+</span>

src/components/Rating/Rating.tsx

@@ -1,6 +1,67 @@
 import React from 'react'
 import type { RatingProps } from './rating'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import './rating.scss'
 
-const Rating = ({}: RatingProps) => <div>rating</div>
+const Rating = ({
+    score,
+    total = 5,
+    showText,
+    text = '{0} out of {1}',
+    showEmpty = true,
+    outline = true,
+    reviewCount,
+    reviewText = '{0} reviews',
+    reviewLink,
+    reviewTarget,
+    color,
+    emptyColor,
+    size,
+    className
+}: RatingProps) => {
+    const classes = [
+        'w-rating',
+        outline && 'outline',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(color && { '--w-rating-color': color }),
+        ...(size && { '--w-rating-size': `${size}px` }),
+        ...(emptyColor && { '--w-rating-empty-color': emptyColor })
+    } as React.CSSProperties
+ 
+    const translatedText = text
+        .replace('{0}', `${score}`)
+        .replace('{1}', `${total}`)
+
+    const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
+
+    return (
+        <span className={classes} style={styles}>
+            <span className="score">{Array(score).fill('★').join('')}</span>
+            {showEmpty && (
+                <span className={total === 10 ? 'empty ten-star' : 'empty'}>
+                    {Array(total - score).fill('★').join('')}
+                </span>
+            )}
+            {showText && (
+                <span className={reviewCount ? 'text m' : 'text'}>
+                    {translatedText}
+                </span>
+            )}
+            {reviewCount && '•'}
+            {reviewCount && (
+                <ConditionalWrapper condition={!!reviewLink} wrapper={children => (
+                    <a href={reviewLink} target={reviewTarget}>
+                        {children}
+                    </a>
+                )}>
+                    <span className="text">{translatedReviewText}</span>
+                </ConditionalWrapper>
+            )}
+        </span>
+    )
+}
 
 export default Rating

src/pages/rating.astro

@@ -25,9 +25,17 @@ const sections = [
 <Layout>
     <h1>Rating</h1>
     <div class="grid md-2 lg-3">
-        <AstroRating score={5} />
-        <SvelteRating score={4} color="#ee5253" />
-        <ReactRating score={3} color="#48dbfb" />
+        <ComponentWrapper type="Astro">
+            <AstroRating score={5} />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteRating score={4} color="#ee5253" />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactRating score={3} color="#48dbfb" />
+        </ComponentWrapper>
     </div>
 
     {sections.map(section => (
@@ -82,7 +90,7 @@ const sections = [
                 <section.component score={3} showText={true} />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Rating with translated text">
+            <ComponentWrapper title="Rating with custom text">
                 <section.component
                     score={3}
                     showText={true}
@@ -97,7 +105,7 @@ const sections = [
                 />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Rating with translated review text">
+            <ComponentWrapper title="Rating with custom review text">
                 <section.component
                     score={3}
                     reviewCount={123}