update list page

parent_app/src/app/list/page.tsx

@@ -1,6 +1,7 @@
 // app/page.tsx (or any page you'd like to use)
 'use client'
 import { useEffect, useState } from 'react';
+import Card from '../../components/Card';
 
 type ImageData = {
   _id: string;
@@ -29,22 +30,25 @@ const ImageGallery = () => {
   }, []);
 
   if (loading) {
-    return <p>Loading images...</p>;
+    return <p className="text-black">Loading images...</p>;
   }
 
   return (
-    <div>
-      <h1>Image Gallery</h1>
+    <div className='min-h-screen bg-gray-100 p-4'>
+      <h1 className="text-black">Image Gallery</h1>
       <ul style={{ listStyleType: 'none', padding: 0 }}>
-        {images.map((image) => (
+        {/* {images.map((image) => (
           <li key={image._id} style={{ marginBottom: '20px' }}>
             <img
               src={`data:image/png;base64,${image.buffer}`}
               alt="Submitted"
               style={{ width: '200px', height: '200px', objectFit: 'cover' }}
             />
             <p>Submitted at: {new Date(image.submittedAt).toLocaleString()}</p>
-          </li>
+          </li> 
+        ))} */}
+        {images.map((image) => (
+          <Card image={image} waga={238} godzina={'16:40'} />
         ))}
       </ul>
     </div>

parent_app/src/components/Card.js

@@ -0,0 +1,40 @@
+import smile from '../icons/smile.svg';
+import sad from '../icons/sad.svg';
+
+const Card = ({ image, waga, godzina }) => {
+    return ( <>
+
+      <div className="bg-white rounded-lg p-4 mb-4 shadow-md items-center" style={{ width: '350px', height: '150px' }}>
+        <div>
+            <p className="text-black">10.05.2024</p>
+        </div>
+        <div className="w-full h-full flex">
+            {/* Left side: Image */}
+            <div className="w-1/3 h-full">
+            {/* <img
+                src={`data:image/png;base64,${image.buffer}`}
+                alt="Card Image"
+                className="w-full max-h-full object-cover rounded-md"
+                style={{ objectFit: 'cover' }}
+            /> */}
+            <svg
+                src="../icons/smile.svg"
+                alt="Card Image"
+                className="w-full max-h-full object-cover rounded-md"
+                style={{ objectFit: 'cover' }}
+            />
+            </div>
+
+            {/* Right side: Text fields */}
+            <div className="w-2/3 h-full pl-4 flex flex-col justify-center">
+            <p className="text-black">Waga: {waga} g</p>
+            <p className="text-black">Godzina: {godzina}</p>
+            </div>
+        </div>
+      </div>
+      </>
+    );
+  };
+
+  export default Card;
+