MED-193: improve mobile design for cart tables

app/home/(user)/_components/cart/mobile-cart-items.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { formatCurrency } from '@/packages/shared/src/utils';
+import { StoreCartLineItem } from '@medusajs/types';
+import { useTranslation } from 'react-i18next';
+
+import { Table, TableBody } from '@kit/ui/shadcn/table';
+
+import MobileCartRow from './mobile-cart-row';
+
+const MobileCartItems = ({
+  item,
+  currencyCode,
+  productColumnLabelKey,
+}: {
+  item: StoreCartLineItem;
+  currencyCode: string;
+  productColumnLabelKey: string;
+}) => {
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  return (
+    <Table className="border-separate rounded-lg border p-2">
+      <TableBody>
+        <MobileCartRow
+          titleKey={productColumnLabelKey}
+          value={item.product_title}
+        />
+        <MobileCartRow titleKey="cart:table.time" value={item.quantity} />
+        <MobileCartRow
+          titleKey="cart:table.price"
+          value={formatCurrency({
+            value: item.unit_price,
+            currencyCode,
+            locale: language,
+          })}
+        />
+        <MobileCartRow
+          titleKey="cart:table.total"
+          value={
+            item.total &&
+            formatCurrency({
+              value: item.total,
+              currencyCode,
+              locale: language,
+            })
+          }
+        />
+      </TableBody>
+    </Table>
+  );
+};
+
+export default MobileCartItems;