Added name and price of the cart item

components/cart/CartItem/CartItem.tsx

@@ -1,11 +1,29 @@
 import { Trash } from '@components/icon'
+import { useCommerce } from '@lib/bigcommerce'
+import formatVariantPrice from 'utils/format-item-price'
+
+const CartItem = ({
+  item,
+  currencyCode,
+}: {
+  item: any
+  currencyCode: string
+}) => {
+  const { locale } = useCommerce()
+  const { price } = formatVariantPrice({
+    listPrice: item.extended_list_price,
+    salePrice: item.extended_sale_price,
+    currencyCode,
+    locale,
+  })
+
+  console.log('ITEM', item)
 
-const CartItem = () => {
   return (
     <li className="flex flex-row space-x-6">
       <div className="h-12 w-12 bg-violet"></div>
       <div className="flex-1 flex flex-col">
-        <span>T-Shirt</span>
+        <span>{item.name}</span>
         <div className="py-2">
           <span>-</span>
           <input
@@ -16,7 +34,7 @@ const CartItem = () => {
         </div>
       </div>
       <div className="flex flex-col space-y-2">
-        <span>$50.00</span>
+        <span>{price}</span>
         <span className="flex justify-end">
           <Trash />
         </span>

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -50,7 +50,11 @@ const CartSidebarView: FC = () => {
           <div className="px-4 sm:px-6 py-4 flex-1">
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
               {items.map((item) => (
-                <CartItem key={item.id} />
+                <CartItem
+                  key={item.id}
+                  item={item}
+                  currencyCode={data?.currency.code!}
+                />
               ))}
             </ul>
           </div>