feat: Add cards to storage page

messages/en.json

@@ -52,6 +52,10 @@
   },
   "storage": {
     "title": "Storage",
+    "card": {
+      "quantityInfo": "{quantity} units available",
+      "locationInfo": "Location: {location}"
+    },
     "combobox": {
       "popularity": "Popularity",
       "sortDescending": "Inventory (descending)",

messages/no.json

@@ -52,6 +52,10 @@
   },
   "storage": {
     "title": "Lager",
+    "card": {
+      "quantityInfo": "{quantity} stk. på lager",
+      "locationInfo": "Hylleplass: {location}"
+    },
     "combobox": {
       "popularity": "Popularitet",
       "sortDescending": "Lagerbeholdning (synkende)",

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

@@ -1,6 +1,16 @@
+import { items } from '@/mock-data/items';
 import { useTranslations } from 'next-intl';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import Image from 'next/image';
 
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/Card';
 import { Combobox } from '@/components/ui/Combobox';
 import { SearchBar } from '@/components/ui/SearchBar';
 
@@ -45,12 +55,43 @@ export default function StoragePage({
   return (
     <>
       <h1>{t('title')}</h1>
-      <SearchBar />
-      <Combobox
-        choices={categories}
-        defaultDescription={t('combobox.defaultDescription')}
-        defaultPlaceholder={t('combobox.defaultPlaceholder')}
-      />
+      <div className='my-4 flex justify-center gap-2'>
+        <SearchBar className='max-w-2xl' />
+        <Combobox
+          choices={categories}
+          defaultDescription={t('combobox.defaultDescription')}
+          defaultPlaceholder={t('combobox.defaultPlaceholder')}
+        />
+      </div>
+      <div className='grid grid-cols-4 gap-3'>
+        {items.map((item) => (
+          <Card key={item.name} className='text-center'>
+            <CardHeader>
+              <CardTitle className='truncate'>{item.name}</CardTitle>
+              <CardDescription className='flex flex-col gap-1'>
+                <span>
+                  {t('card.quantityInfo', { quantity: item.quantity })}
+                </span>
+                <span>
+                  {t('card.locationInfo', { location: item.location })}
+                </span>
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Image
+                src='/unknown.png'
+                width={192}
+                height={192}
+                alt={`Photo of ${item.name}`}
+                className='mx-auto'
+              />
+            </CardContent>
+            <CardFooter>
+              <p>Card Footer</p>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
     </>
   );
 }

src/mock-data/items.ts

@@ -0,0 +1,144 @@
+const items = [
+  {
+    name: 'Laptop',
+    photo_url: 'https://example.com/photos/laptop.jpg',
+    status: 'Operational',
+    quantity: 15,
+    location: 'Storage Room A',
+  },
+  {
+    name: 'Desktop PC',
+    photo_url: 'https://example.com/photos/desktop_pc.jpg',
+    status: 'Operational',
+    quantity: 10,
+    location: 'Workstation Area 1',
+  },
+  {
+    name: 'Monitor',
+    photo_url: 'https://example.com/photos/monitor.jpg',
+    status: 'Operational',
+    quantity: 20,
+    location: 'Storage Room B',
+  },
+  {
+    name: 'Keyboard',
+    photo_url: 'https://example.com/photos/keyboard.jpg',
+    status: 'Operational',
+    quantity: 50,
+    location: 'Storage Room A',
+  },
+  {
+    name: 'Mouse',
+    photo_url: 'https://example.com/photos/mouse.jpg',
+    status: 'Operational',
+    quantity: 50,
+    location: 'Storage Room A',
+  },
+  {
+    name: 'Router',
+    photo_url: 'https://example.com/photos/router.jpg',
+    status: 'Operational',
+    quantity: 5,
+    location: 'Networking Room',
+  },
+  {
+    name: 'Ethernet Cable',
+    photo_url: 'https://example.com/photos/ethernet_cable.jpg',
+    status: 'Operational',
+    quantity: 100,
+    location: 'Networking Room',
+  },
+  {
+    name: 'External Hard Drive',
+    photo_url: 'https://example.com/photos/external_hard_drive.jpg',
+    status: 'Operational',
+    quantity: 25,
+    location: 'Storage Room B',
+  },
+  {
+    name: 'USB Flash Drive',
+    photo_url: 'https://example.com/photos/usb_flash_drive.jpg',
+    status: 'Operational',
+    quantity: 75,
+    location: 'Storage Room B',
+  },
+  {
+    name: 'Power Supply Unit (PSU)',
+    photo_url: 'https://example.com/photos/psu.jpg',
+    status: 'Operational',
+    quantity: 30,
+    location: 'Storage Room C',
+  },
+  {
+    name: 'Graphics Card',
+    photo_url: 'https://example.com/photos/graphics_card.jpg',
+    status: 'Operational',
+    quantity: 12,
+    location: 'Storage Room C',
+  },
+  {
+    name: 'RAM Module',
+    photo_url: 'https://example.com/photos/ram_module.jpg',
+    status: 'Operational',
+    quantity: 40,
+    location: 'Storage Room C',
+  },
+  {
+    name: 'Motherboard',
+    photo_url: 'https://example.com/photos/motherboard.jpg',
+    status: 'Operational',
+    quantity: 10,
+    location: 'Storage Room C',
+  },
+  {
+    name: 'CPU',
+    photo_url: 'https://example.com/photos/cpu.jpg',
+    status: 'Operational',
+    quantity: 10,
+    location: 'Storage Room C',
+  },
+  {
+    name: 'SSD',
+    photo_url: 'https://example.com/photos/ssd.jpg',
+    status: 'Operational',
+    quantity: 20,
+    location: 'Storage Room C',
+  },
+  {
+    name: 'Network Switch',
+    photo_url: 'https://example.com/photos/network_switch.jpg',
+    status: 'Operational',
+    quantity: 5,
+    location: 'Networking Room',
+  },
+  {
+    name: 'Soldering Iron',
+    photo_url: 'https://example.com/photos/soldering_iron.jpg',
+    status: 'Operational',
+    quantity: 8,
+    location: 'Repair Station',
+  },
+  {
+    name: 'Multimeter',
+    photo_url: 'https://example.com/photos/multimeter.jpg',
+    status: 'Operational',
+    quantity: 10,
+    location: 'Repair Station',
+  },
+  {
+    name: 'Screwdriver Set',
+    photo_url: 'https://example.com/photos/screwdriver_set.jpg',
+    status: 'Operational',
+    quantity: 20,
+    location: 'Toolbox 1',
+  },
+  {
+    name: 'Anti-static Wrist Strap',
+    photo_url: 'https://example.com/photos/anti_static_wrist_strap.jpg',
+    status: 'Operational',
+    quantity: 15,
+    location: 'Toolbox 2',
+  },
+];
+
+export { items };