vmi-wd-frontend Public

Watch 0 Fork 0 Star 0
TypeScript · 6189 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="/memorial"
54 className="bg-vmi-gold text-vmi-red px-6 py-2 rounded font-bold hover:bg-white transition-colors shadow-md"
55 >
56 View Complete Index
57 </Link>
58 </nav>
59 </div>
60 </div>
61 </header>
62
63 {/* Main Content */}
64 <main className="max-w-5xl mx-auto px-4 py-16">
65 {/* Title */}
66 <h1 className="text-5xl font-black text-center mb-16 text-vmi-red">
67 VMI Virtual Memorial
68 </h1>
69
70 {/* Welcome Card */}
71 <div className="bg-white border-2 border-vmi-gold rounded-lg p-10 mb-16 shadow-xl">
72 <div className="max-w-3xl mx-auto text-center">
73 <p className="text-xl text-gray-800 mb-8 leading-relaxed">
74 Since 1839, the Virginia Military Institute has produced leaders of character who have served their country in peace and at war.
75 From the Mexican War to the War on Terrorism, VMI cadets and alumni have answered the call to service.
76 </p>
77
78 <p className="text-xl text-gray-800 mb-8 leading-relaxed">
79 This virtual memorial lists the names of VMI Alumni who died on the Field of Honor.
80 Their class year is shown with their names.
81 Links for those highlighted provide more information on their story and how they &quot;Gave All.&quot;
82 </p>
83
84 {/* Placeholder for statue image */}
85 <div className="relative w-full h-[600px] mb-6 rounded-lg overflow-hidden border-4 border-white shadow-inner">
86 <Image
87 src="/vmi-memorial-statue.jpg"
88 alt="VMI Memorial Statue - Virginia Mourning Her Dead"
89 fill
90 className="object-cover object-top"
91 priority
92 />
93 </div>
94 <p className="text-2xl text-vmi-red font-bold italic">
95 &quot;In Pace Paratus&quot;
96 </p>
97 <p className="text-lg text-gray-700">
98 Prepared in Peace
99 </p>
100 </div>
101 </div>
102
103 {/* Conflicts List */}
104 <div className="bg-white border-2 border-gray-300 rounded-lg p-10 shadow-xl">
105 <h2 className="text-3xl font-bold mb-8 text-center text-vmi-red">
106 Browse by Conflict
107 </h2>
108
109 {loading && (
110 <p className="text-center text-gray-600">Loading conflicts...</p>
111 )}
112
113 {error && (
114 <p className="text-center text-red-600">{error}</p>
115 )}
116
117 {!loading && !error && conflicts.length === 0 && (
118 <p className="text-center text-gray-600">No conflicts found. Please add some through the admin panel.</p>
119 )}
120
121 {!loading && !error && conflicts.length > 0 && (
122 <ul className="space-y-4">
123 {conflicts.map((conflict) => (
124 <li key={conflict.id}>
125 <Link
126 href={`/memorial/conflict/${conflict.id}`}
127 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"
128 >
129 <div className="flex justify-between items-center">
130 <div>
131 <h3 className="text-2xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors">
132 {conflict.name}
133 </h3>
134 <p className="text-gray-600">
135 {conflict.start_year === conflict.end_year
136 ? conflict.start_year
137 : `${conflict.start_year} – ${conflict.end_year || 'Present'}`}
138 </p>
139 </div>
140 <div className="text-right">
141 <p className="text-4xl font-black text-vmi-red">
142 {conflict.casualty_count}
143 </p>
144 <p className="text-sm text-gray-600 uppercase tracking-wide">Casualties</p>
145 </div>
146 </div>
147 </Link>
148 </li>
149 ))}
150 </ul>
151 )}
152 </div>
153 </main>
154 </div>
155 );
156 }