Add payment form and announcement components

frontend/src/components/announcement-list.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api, Announcement } from '@/lib/api';
+
+interface AnnouncementListProps {
+  eventId: string;
+}
+
+export function AnnouncementList({ eventId }: AnnouncementListProps) {
+  const [announcements, setAnnouncements] = useState<Announcement[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadAnnouncements();
+  }, [eventId]);
+
+  const loadAnnouncements = async () => {
+    try {
+      setIsLoading(true);
+      const data = await api.getEventAnnouncements(eventId);
+      setAnnouncements(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load announcements');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-4">Loading announcements...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded text-sm">
+        {error}
+      </div>
+    );
+  }
+
+  if (announcements.length === 0) {
+    return (
+      <div className="text-center py-4 text-gray-500 text-sm">
+        No announcements yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {announcements.map((announcement) => (
+        <div key={announcement.id} className="bg-white rounded-lg shadow-sm border p-4">
+          <div className="flex justify-between items-start mb-2">
+            <h3 className="font-semibold text-lg">{announcement.title}</h3>
+            <span className="text-xs text-gray-500">
+              {new Date(announcement.createdAt).toLocaleDateString()}
+            </span>
+          </div>
+          <p className="text-gray-700 whitespace-pre-wrap">{announcement.content}</p>
+          <p className="text-sm text-gray-500 mt-2">
+            Posted by {announcement.authorName}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}