Adding Assets

components/product/ProductSidebar/ProductSidebar.tsx

@@ -12,9 +12,10 @@ import {
 
 interface ProductSidebarProps {
   product: Product
+  className?: string
 }
 
-const ProductSidebar: FC<ProductSidebarProps> = ({ product }) => {
+const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
   const addItem = useAddItem()
   const { openSidebar } = useUI()
   const [loading, setLoading] = useState(false)
@@ -40,7 +41,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product }) => {
   }
 
   return (
-    <>
+    <div className={className}>
       <ProductOptions
         options={product.options}
         selectedOptions={selectedOptions}
@@ -51,7 +52,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product }) => {
         html={product.descriptionHtml || product.description}
       />
       <div className="flex flex-row justify-between items-center">
-        <Rating value={2} />
+        <Rating value={4} />
         <div className="text-accent-6 pr-1 font-medium text-sm">36 reviews</div>
       </div>
       <div>
@@ -79,7 +80,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product }) => {
           to COVID-19.
         </Collapse>
       </div>
-    </>
+    </div>
   )
 }
 

components/product/ProductView/ProductView.tsx

@@ -77,9 +77,8 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
               />
             )}
           </div>
-          <div className={s.sidebar}>
+
-            <ProductSidebar product={product} />
+          <ProductSidebar product={product} className={s.sidebar} />
-          </div>
         </div>
         <hr className="mt-7 border-accent-2" />
         <section className="py-12 px-6 mb-10">