86b2kunbc-base64-enhancement: Implemented API route to fetch and serve base64 image strings from images.json

venue-reservation/src/app/api/images/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import path from 'path';
+import fs from 'fs';
+
+export const GET = async () => {
+  // Define the path to the images.json file
+  const filePath = path.join(process.cwd(), 'src', 'data', 'images.json');
+
+  // Read the file
+  try {
+    const fileContents = fs.readFileSync(filePath, 'utf8');
+    const imagesData = JSON.parse(fileContents);
+
+    // Return JSON response with image data
+    return NextResponse.json(imagesData);
+  } catch (error) {
+    console.error('Error reading image data:', error);
+    return NextResponse.json({ error: 'Failed to read image data' }, { status: 500 });
+  }
+};

venue-reservation/src/components/venue_card/user_venue_card.tsx

@@ -1,11 +1,74 @@
+"use client";
+
 import Carousel from '../carousel';
+import { useState, useEffect } from 'react';
+
+interface ImageData {
+  name: string;
+  base64: string;
+}
 
 const VenueCard = () => {
-  const images = [
-    '/images/image1.jpg',
-    '/images/image2.jpg',
-    '/images/image3.jpg'
-  ];
+  const [images, setImages] = useState<string[]>([]);
+
+  // Fetch the images from the API route
+  useEffect(() => {
+    const fetchImages = async () => {
+      try {
+        const response = await fetch('/api/images');
+        const data = await response.json();
+
+        // Process images and resize them
+        const resizedBase64Images = await Promise.all(
+          data.images.map((image: ImageData) => resizeImage(image.base64, 600, 400))
+        );
+
+        setImages(resizedBase64Images);
+      } catch (error) {
+        console.error('Failed to fetch images:', error);
+      }
+    };
+
+    fetchImages();
+  }, []);
+
+  // Function to resize the image and return base64
+  const resizeImage = async (base64: string, maxWidth: number, maxHeight: number): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = base64;
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        // Calculate the new dimensions
+        let width = img.width;
+        let height = img.height;
+
+        if (width > maxWidth || height > maxHeight) {
+          const aspectRatio = width / height;
+          if (width > height) {
+            width = maxWidth;
+            height = Math.round(maxWidth / aspectRatio);
+          } else {
+            height = maxHeight;
+            width = Math.round(maxHeight * aspectRatio);
+          }
+        }
+
+        // Set canvas dimensions and draw the image
+        canvas.width = width;
+        canvas.height = height;
+        ctx?.drawImage(img, 0, 0, width, height);
+
+        // Get the resized image as base64
+        const resizedBase64 = canvas.toDataURL('image/jpeg'); 
+        resolve(resizedBase64);
+      };
+
+      img.onerror = (error) => reject(error);
+    });
+  };
 
   return (
     <div className="container mx-auto mt-6 p-4 border border-gray-300 rounded-xl shadow-lg flex flex-col md:flex-row">
@@ -22,7 +85,6 @@ const VenueCard = () => {
         />
       </div>
 
-
       {/* Details Section */}
       <div className="w-full md:w-3/5 p-4 flex flex-col justify-between">
         <div>
@@ -45,7 +107,6 @@ const VenueCard = () => {
         </div>
       </div>
     </div>
-
   );
 };