added getEventImages and getEventTickets (to be tested)

app/page.tsx

@@ -3,6 +3,8 @@ import EventCounter from '@/components/sc/eventCounter';
 import CreateEvent from '@/components/sc/createEvent';
 import GetEventPrice from '@/components/sc/getEventPrice';
 import FlareFeed from '@/components/sc/getFlareFeed';
+import GetEventImages from '@/components/sc/getEventImages';
+import GetEventTickets from '@/components/sc/getEventTickets';
 
 export default function Home() {
   return (
@@ -35,6 +37,10 @@ export default function Home() {
 
         <FlareFeed />
 
+        <GetEventImages />
+
+        <GetEventTickets />
+
         <div className="flex gap-4 items-center flex-col sm:flex-row">
           <a
             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"

components/sc/getEventImages.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React, { useState } from 'react';
+import { getContract } from '@/lib/ethers'; // Adjust the path to your ethers helper
+
+const GetEventImages = () => {
+  const [eventId, setEventId] = useState<number | null>(null);
+  const [images, setImages] = useState<string[] | null>(null);
+
+  const handleGetImages = async () => {
+    try {
+      const contract = getContract();
+
+      if (eventId === null) return;
+
+      const eventImages = await contract.getEventImages(eventId);
+      setImages(eventImages);
+    } catch (error) {
+      console.error('Error fetching event images:', error);
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <h2>Get Event Images</h2>
+      <input
+        type="number"
+        placeholder="Enter Event ID"
+        value={eventId !== null ? eventId : ''}
+        onChange={(e) => setEventId(Number(e.target.value))}
+        className="border p-2 mb-2"
+      />
+      <button
+        onClick={handleGetImages}
+        className="bg-blue-500 text-white px-4 py-2 rounded mb-4"
+      >
+        Get Images
+      </button>
+
+      {images && (
+        <div className="mt-4">
+          <h3>Images for Event {eventId}:</h3>
+          {images.length > 0 ? (
+            images.map((img, index) => (
+              <div key={index}>
+                <p>{img}</p>
+                <img
+                  src={img}
+                  alt={`Event ${eventId} Image ${index + 1}`}
+                  className="mb-4"
+                />
+              </div>
+            ))
+          ) : (
+            <p>No images available for this event.</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GetEventImages;

components/sc/getEventTickets.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React, { useState } from 'react';
+import { getContract } from '@/lib/ethers'; // Adjust the path to your ethers helper
+
+const GetEventTickets = () => {
+  const [eventId, setEventId] = useState<number | null>(null);
+  const [tickets, setTickets] = useState<number[] | null>(null);
+
+  const handleGetTickets = async () => {
+    try {
+      const contract = getContract();
+
+      if (eventId === null) return;
+
+      const eventTickets = await contract.getEventTickets(eventId);
+      setTickets(eventTickets);
+    } catch (error) {
+      console.error('Error fetching event tickets:', error);
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <h2>Get Event Tickets</h2>
+      <input
+        type="number"
+        placeholder="Enter Event ID"
+        value={eventId !== null ? eventId : ''}
+        onChange={(e) => setEventId(Number(e.target.value))}
+        className="border p-2 mb-2"
+      />
+      <button
+        onClick={handleGetTickets}
+        className="bg-green-500 text-white px-4 py-2 rounded mb-4"
+      >
+        Get Tickets
+      </button>
+
+      {tickets && (
+        <div className="mt-4">
+          <h3>Tickets for Event {eventId}:</h3>
+          {tickets.length > 0 ? (
+            <ul>
+              {tickets.map((ticketId, index) => (
+                <li key={index}>Ticket ID: {ticketId}</li>
+              ))}
+            </ul>
+          ) : (
+            <p>No tickets available for this event.</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GetEventTickets;