feat: Add clear cart button

messages/en.json

@@ -84,7 +84,8 @@
       "unitsAvailable": "Units available",
       "tableDescription": "A list of your shopping cart items.",
       "backToStorage": "Back to storage",
-      "cartEmpty": "Your shopping cart is empty."
+      "cartEmpty": "Your shopping cart is empty.",
+      "clearCart": "Empty shopping cart"
     }
   }
 }

messages/no.json

@@ -84,7 +84,8 @@
       "unitsAvailable": "Stk tilgjengelig",
       "tableDescription": "En liste over handlekurven din.",
       "backToStorage": "Tilbake til lageret",
-      "cartEmpty": "Handlekurven din er tom."
+      "cartEmpty": "Handlekurven din er tom.",
+      "clearCart": "Tøm handlekurven"
     }
   }
 }

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

@@ -1,3 +1,4 @@
+import { ShoppingCartClearButton } from '@/components/storage/ShoppingCartClearButton';
 import { ShoppingCartTable } from '@/components/storage/ShoppingCartTable';
 import { Button } from '@/components/ui/Button';
 import { Link } from '@/lib/navigation';
@@ -26,12 +27,15 @@ export default function StorageShoppingCartPage({
     <>
       <h1 className='my-4 md:text-center'>{t('title')}</h1>
       <ShoppingCartTable messages={tableMessages} />
-      <Link href='/storage'>
-        <Button className='mx-auto flex gap-2'>
-          <ArrowLeft />
-          {t('backToStorage')}
-        </Button>
-      </Link>
+      <div className='flex justify-center gap-2'>
+        <Link href='/storage'>
+          <Button className='flex gap-2'>
+            <ArrowLeft />
+            {t('backToStorage')}
+          </Button>
+        </Link>
+        <ShoppingCartClearButton caption={t('clearCart')} />
+      </div>
     </>
   );
 }

src/components/storage/ShoppingCartClearButton.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { Button } from '@/components/ui/Button';
+import { X } from 'lucide-react';
+import { useLocalStorage } from 'usehooks-ts';
+
+function ShoppingCartClearButton({ caption }: { caption: string }) {
+  const [cart, setCart] = useLocalStorage<number[]>('shopping-cart', []);
+
+  function clearCart() {
+    setCart([]);
+  }
+
+  if (cart.length <= 0) return;
+
+  return (
+    <Button
+      className='flex gap-2'
+      variant='destructive'
+      onClick={() => clearCart()}
+    >
+      <X />
+      {caption}
+    </Button>
+  );
+}
+
+export { ShoppingCartClearButton };