feat: Add shopping cart page with a table

messages/en.json

@@ -74,6 +74,14 @@
     },
     "tooltips": {
       "viewShoppingCart": "View shopping cart"
+    },
+    "shoppingCart": {
+      "title": "Shopping Cart",
+      "productId": "Product id",
+      "productName": "Product Name",
+      "location": "Location",
+      "unitsAvailable": "Units available",
+      "tableDescription": "A list of your shopping cart items."
     }
   }
 }

messages/no.json

@@ -74,6 +74,14 @@
     },
     "tooltips": {
       "viewShoppingCart": "Vis handlekurv"
+    },
+    "shoppingCart": {
+      "title": "Handlekurv",
+      "productId": "Produkt id",
+      "productName": "Produktnavn",
+      "location": "Plass",
+      "unitsAvailable": "Stk tilgjengelig",
+      "tableDescription": "En liste over handlekurven din."
     }
   }
 }

src/app/[locale]/(default)/storage/shopping-cart/page.tsx

@@ -0,0 +1,51 @@
+import { useTranslations } from 'next-intl';
+
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/Table';
+
+export default function StorageShoppingCartPage() {
+  const t = useTranslations('storage.shoppingCart');
+  return (
+    <>
+      <h1 className='my-4 md:text-center'>{t('title')}</h1>
+      <Table className='my-4'>
+        <TableCaption>{t('tableDescription')}</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className='w-[150px]'>{t('productId')}</TableHead>
+            <TableHead>{t('productName')}</TableHead>
+            <TableHead>{t('location')}</TableHead>
+            <TableHead className='text-right'>{t('unitsAvailable')}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell className='font-medium'>01</TableCell>
+            <TableCell>Laptop</TableCell>
+            <TableCell>Storage Room A</TableCell>
+            <TableCell className='text-right'>15</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className='font-medium'>01</TableCell>
+            <TableCell>Laptop</TableCell>
+            <TableCell>Storage Room A</TableCell>
+            <TableCell className='text-right'>15</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className='font-medium'>01</TableCell>
+            <TableCell>Laptop</TableCell>
+            <TableCell>Storage Room A</TableCell>
+            <TableCell className='text-right'>15</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </>
+  );
+}

src/components/ui/Table.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import { cx } from '@/lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className='relative w-full overflow-auto'>
+    <table
+      ref={ref}
+      className={cx('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cx('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cx('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cx(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cx(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cx(
+      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cx('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cx('mt-4 text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

src/lib/config.ts

@@ -30,6 +30,10 @@ const pathnames = {
     en: '/storage',
     no: '/lager',
   },
+  '/storage/shopping-cart': {
+    en: '/storage/shopping-cart',
+    no: '/lager/handlekurv',
+  },
   '/about': {
     en: '/about',
     no: '/om-oss',