Adding Rating Component

components/product/ProductView/ProductView.tsx

@@ -9,11 +9,11 @@ import { getVariant, SelectedOptions } from '../helpers'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container, Text, useUI } from '@components/ui'
 import { useAddItem } from '@framework/cart'
+import Rating from '@components/ui/Rating'
 import Collapse from '@components/ui/Collapse'
 import ProductCard from '@components/product/ProductCard'
 import WishlistButton from '@components/wishlist/WishlistButton'
-import rangeMap from '@lib/range-map'
-import { Star } from '@components/icons'
+
 interface Props {
   children?: any
   product: Product
@@ -154,19 +154,7 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
             </div>
           </section>
           <div className="flex flex-row justify-between items-center">
-            {/**
-             * TODO make component Rate stars={}
-             */}
-            <div className="flex flex-row py-6">
-              {rangeMap(4, (i) => (
-                <span className="inline-block ml-1">
-                  <Star />
-                </span>
-              ))}
-              <span className="inline-block ml-1 text-accent-5">
-                <Star />
-              </span>
-            </div>
+            <Rating value={2} />
             <div className="text-accent-6 pr-1">36 reviews</div>
           </div>
           <div>

components/ui/Rating/Rating.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react'
+import rangeMap from '@lib/range-map'
+import { Star } from '@components/icons'
+import cn from 'classnames'
+
+export interface RatingProps {
+  value: number
+}
+
+const Quantity: FC<RatingProps> = ({ value = 5 }) => {
+  return (
+    <div className="flex flex-row py-6 text-accent-9">
+      {rangeMap(5, (i) => (
+        <span
+          className={cn('inline-block ml-1 ', {
+            'text-accent-5': i >= Math.floor(value),
+          })}
+        >
+          <Star />
+        </span>
+      ))}
+    </div>
+  )
+}
+
+export default Quantity

components/ui/Rating/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Rating'
+export * from './Rating'

components/ui/index.ts

@@ -12,4 +12,5 @@ export { default as Text } from './Text'
 export { default as Input } from './Input'
 export { default as Collapse } from './Collapse'
 export { default as Quantity } from './Quantity'
+export { default as Rating } from './Rating'
 export { useUI } from './context'