Added cart item and handle empty cart state

components/cart/CartItem/CartItem.tsx

@@ -0,0 +1,28 @@
+import { Trash } from '@components/icon'
+
+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>
+        <div className="py-2">
+          <span>-</span>
+          <input
+            className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
+            defaultValue="1"
+          />
+          <span>+</span>
+        </div>
+      </div>
+      <div className="flex flex-col space-y-2">
+        <span>$50.00</span>
+        <span className="flex justify-end">
+          <Trash />
+        </span>
+      </div>
+    </li>
+  )
+}
+
+export default CartItem

components/cart/CartItem/index.ts

@@ -0,0 +1 @@
+export { default } from './CartItem'

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -4,10 +4,12 @@ import { Button } from '@components/ui'
 import { Trash, Cross } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { useCart } from '@lib/bigcommerce/cart'
+import CartItem from '../CartItem'
 
 const CartSidebarView: FC = () => {
   const { data, isEmpty } = useCart()
   const { closeSidebar } = useUI()
+  const items = data?.line_items.physical_items ?? []
 
   console.log('CART', data, isEmpty)
 
@@ -28,39 +30,35 @@ const CartSidebarView: FC = () => {
             <UserNav />
           </div>
         </div>
-        <h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
+        {isEmpty ? (
-          My Cart
+          <h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
-        </h2>
+            Your cart is currently empty
+          </h2>
+        ) : (
+          <h2 className="pt-6 text-lg leading-7 font-medium text-gray-900 uppercase">
+            My Cart
+          </h2>
+        )}
       </header>
 
-      <div className="px-4 sm:px-6 py-4 flex-1">
+      {isEmpty ? (
-        <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
+        <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-          <li className="flex flex-row space-x-6">
+          <Button>Continue Shopping</Button>
-            <div className="h-12 w-12 bg-violet"></div>
+        </div>
-            <div className="flex-1 flex flex-col">
+      ) : (
-              <span>T-Shirt</span>
+        <>
-              <div className="py-2">
+          <div className="px-4 sm:px-6 py-4 flex-1">
-                <span>-</span>
+            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                <input
+              {items.map((item) => (
-                  className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
+                <CartItem key={item.id} />
-                  defaultValue="1"
+              ))}
-                />
+            </ul>
-                <span>+</span>
+          </div>
-              </div>
+          <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-            </div>
+            <Button>Proceed to Checkout</Button>
-            <div className="flex flex-col space-y-2">
+          </div>
-              <span>$50.00</span>
+        </>
-              <span className="flex justify-end">
+      )}
-                <Trash />
-              </span>
-            </div>
-          </li>
-        </ul>
-      </div>
-
-      <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-        <Button>Proceed to Checkout</Button>
-      </div>
     </>
   )
 }

components/ui/Sidebar/Sidebar.tsx

@@ -15,7 +15,7 @@ const Sidebar: FC<Props> = ({ className, children }) => {
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 ">
             <div className="w-screen max-w-2xl">
-              <div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
+              <div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
                 {children}
               </div>
             </div>

lib/bigcommerce/api/cart.ts

@@ -35,7 +35,7 @@ export type Cart = {
     custom_items: any[]
     digital_items: any[]
     gift_certificates: any[]
-    psysical_items: any[]
+    physical_items: any[]
   }
   // TODO: add missing fields
 }