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,32 @@
+"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();
+        const base64Images = data.images.map((image: ImageData) => image.base64);
+        setImages(base64Images);
+      } catch (error) {
+        console.error('Failed to fetch images:', error);
+      }
+    };
+
+    fetchImages();
+  }, []);
 
   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 +43,6 @@ const VenueCard = () => {
         />
       </div>
 
-
       {/* Details Section */}
       <div className="w-full md:w-3/5 p-4 flex flex-col justify-between">
         <div>
@@ -45,7 +65,6 @@ const VenueCard = () => {
         </div>
       </div>
     </div>
-
   );
 };