vmi-wd-frontend Public

Watch 0 Fork 0 Star 0
TypeScript · 6488 bytes Raw Blame History
1 'use client';
2
3 import { useState, useEffect } from 'react';
4 import Link from 'next/link';
5 import { getConflicts, Conflict } from '@/lib/api';
6 import Image from 'next/image';
7
8 export default function Home() {
9 const [conflicts, setConflicts] = useState<Conflict[]>([]);
10 const [loading, setLoading] = useState(true);
11 const [error, setError] = useState<string | null>(null);
12
13 useEffect(() => {
14 async function fetchConflicts() {
15 try {
16 const data = await getConflicts();
17 setConflicts(data);
18 } catch (err) {
19 setError('Failed to load conflicts');
20 console.error(err);
21 } finally {
22 setLoading(false);
23 }
24 }
25 fetchConflicts();
26 }, []);
27
28 return (
29 <div className="min-h-screen bg-vmi-cream">
30 {/* Header */}
31 <header className="bg-vmi-red shadow-lg">
32 <div className="max-w-6xl mx-auto px-4 py-6">
33 <div className="flex justify-between items-center">
34 <div className="flex items-center space-x-3">
35 {/* VMI Seal placeholder - replace with actual image */}
36 <div className="w-16 h-16 bg-vmi-gold rounded-full flex items-center justify-center text-vmi-red font-bold text-xl border-4 border-white">
37 VMI
38 </div>
39 <div className="text-white">
40 <div className="text-sm uppercase tracking-wide">Virginia Military Institute</div>
41 <div className="text-xs">Lexington, Virginia</div>
42 </div>
43 </div>
44 {/* Navigation */}
45 <nav className="flex items-center space-x-4">
46 <Link
47 href="/memorial/search"
48 className="text-vmi-gold hover:text-white transition-colors font-semibold"
49 >
50 Search Memorial
51 </Link>
52 <Link
53 href="/awards"
54 className="bg-vmi-gold text-vmi-red px-4 py-2 rounded font-bold hover:bg-white transition-colors shadow-md text-center text-sm leading-tight"
55 >
56 Awards for<br />Heroism &amp; Gallantry
57 </Link>
58 <Link
59 href="/memorial"
60 className="bg-vmi-gold text-vmi-red px-6 py-2 rounded font-bold hover:bg-white transition-colors shadow-md"
61 >
62 View Complete Index
63 </Link>
64 </nav>
65 </div>
66 </div>
67 </header>
68
69 {/* Main Content */}
70 <main className="max-w-5xl mx-auto px-4 py-16">
71 {/* Title */}
72 <h1 className="text-5xl font-black text-center mb-16 text-vmi-red">
73 VMI Virtual Memorial
74 </h1>
75
76 {/* Welcome Card */}
77 <div className="bg-white border-2 border-vmi-gold rounded-lg p-10 mb-16 shadow-xl">
78 <div className="max-w-3xl mx-auto text-center">
79 <p className="text-xl text-gray-800 mb-8 leading-relaxed">
80 Since 1839, the Virginia Military Institute has produced leaders of character who have served their country in peace and at war.
81 From the Mexican War to the War on Terrorism, VMI cadets and alumni have answered the call to service.
82 </p>
83
84 <p className="text-xl text-gray-800 mb-8 leading-relaxed">
85 This virtual memorial lists the names of VMI Alumni who died on the Field of Honor.
86 Their class year is shown with their names.
87 Links for those highlighted provide more information on their story and how they &quot;Gave All.&quot;
88 </p>
89
90 {/* Placeholder for statue image */}
91 <div className="relative w-full h-[600px] mb-6 rounded-lg overflow-hidden border-4 border-white shadow-inner">
92 <Image
93 src="/vmi-memorial-statue.jpg"
94 alt="VMI Memorial Statue - Virginia Mourning Her Dead"
95 fill
96 className="object-cover object-top"
97 priority
98 />
99 </div>
100 <p className="text-2xl text-vmi-red font-bold italic">
101 &quot;In Pace Paratus&quot;
102 </p>
103 <p className="text-lg text-gray-700">
104 Prepared in Peace
105 </p>
106 </div>
107 </div>
108
109 {/* Conflicts List */}
110 <div className="bg-white border-2 border-gray-300 rounded-lg p-10 shadow-xl">
111 <h2 className="text-3xl font-bold mb-8 text-center text-vmi-red">
112 Browse by Conflict
113 </h2>
114
115 {loading && (
116 <p className="text-center text-gray-600">Loading conflicts...</p>
117 )}
118
119 {error && (
120 <p className="text-center text-red-600">{error}</p>
121 )}
122
123 {!loading && !error && conflicts.length === 0 && (
124 <p className="text-center text-gray-600">No conflicts found. Please add some through the admin panel.</p>
125 )}
126
127 {!loading && !error && conflicts.length > 0 && (
128 <ul className="space-y-4">
129 {conflicts.map((conflict) => (
130 <li key={conflict.id}>
131 <Link
132 href={`/memorial/conflict/${conflict.id}`}
133 className="block p-6 rounded-lg border-2 border-gray-200 hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"
134 >
135 <div className="flex justify-between items-center">
136 <div>
137 <h3 className="text-2xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors">
138 {conflict.name}
139 </h3>
140 <p className="text-gray-600">
141 {conflict.start_year === conflict.end_year
142 ? conflict.start_year
143 : `${conflict.start_year} – ${conflict.end_year || 'Present'}`}
144 </p>
145 </div>
146 <div className="text-right">
147 <p className="text-4xl font-black text-vmi-red">
148 {conflict.casualty_count}
149 </p>
150 <p className="text-sm text-gray-600 uppercase tracking-wide">Casualties</p>
151 </div>
152 </div>
153 </Link>
154 </li>
155 ))}
156 </ul>
157 )}
158 </div>
159 </main>
160 </div>
161 );
162 }