vmi-wd-frontend Public

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