vmi-wd-frontend Public

Watch 0 Fork 0 Star 0
TypeScript · 4459 bytes Raw Blame History
1 'use client';
2
3 import { useState, useEffect } from 'react';
4 import Link from 'next/link';
5 import Image from 'next/image';
6 import Header from '@/components/Header';
7 import { getAwards, Award } from '@/lib/api';
8
9 export default function AwardsPage() {
10 const [awards, setAwards] = useState<Award[]>([]);
11 const [loading, setLoading] = useState(true);
12 const [error, setError] = useState<string | null>(null);
13
14 useEffect(() => {
15 async function fetchAwards() {
16 try {
17 const data = await getAwards();
18 setAwards(data);
19 } catch (err) {
20 setError('Failed to load awards');
21 console.error(err);
22 } finally {
23 setLoading(false);
24 }
25 }
26 fetchAwards();
27 }, []);
28
29 const breadcrumbs = [
30 { label: 'Home', href: '/' },
31 { label: 'Awards for Heroism and Gallantry' }
32 ];
33
34 // Helper to get image extension
35 const getImagePath = (filename: string) => {
36 // Check for common extensions in public folder
37 const extensions = ['.jpg', '.png', '.jpeg', '.gif'];
38 for (const ext of extensions) {
39 // The filename in the DB might already include extension or not
40 if (filename.toLowerCase().endsWith(ext)) {
41 return `/${filename}`;
42 }
43 }
44 // Default to .jpg if no extension
45 return `/${filename}.jpg`;
46 };
47
48 return (
49 <div className="min-h-screen bg-vmi-cream">
50 <Header breadcrumbs={breadcrumbs} showAwards={false} />
51
52 <main className="max-w-6xl mx-auto px-4 py-12">
53 {/* Title Section */}
54 <div className="bg-vmi-light-gold border-2 border-vmi-gold rounded-lg p-8 mb-12 shadow-xl">
55 <h1 className="text-4xl font-black text-center mb-4 text-vmi-red">
56 Awards for Heroism and Gallantry
57 </h1>
58 <p className="text-center text-gray-700 max-w-3xl mx-auto">
59 Those Alumni who &ldquo;Gave All&rdquo; on this memorial website who were also recognized for valor and heroism in combat are listed on this page with a link to their profile.
60 These awards honor extraordinary acts of bravery and selfless service in defense of our country.
61 </p>
62 </div>
63
64 {/* Awards Grid */}
65 <div className="bg-white border-2 border-gray-300 rounded-lg p-8 shadow-xl">
66 <h2 className="text-3xl font-bold mb-8 text-center text-vmi-red">
67 Military Decorations
68 </h2>
69
70 {loading && (
71 <p className="text-center text-gray-600">Loading awards...</p>
72 )}
73
74 {error && (
75 <p className="text-center text-red-600">{error}</p>
76 )}
77
78 {!loading && !error && awards.length === 0 && (
79 <p className="text-center text-gray-600">
80 No awards found. Please add some through the admin panel.
81 </p>
82 )}
83
84 {!loading && !error && awards.length > 0 && (
85 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
86 {awards.map((award) => (
87 <Link
88 key={award.id}
89 href={`/awards/${award.id}`}
90 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"
91 >
92 <div className="flex flex-col items-center text-center">
93 {/* Award Image */}
94 <div className="relative w-24 h-32 mb-4">
95 <Image
96 src={getImagePath(award.image_filename)}
97 alt={award.name}
98 fill
99 className="object-contain"
100 sizes="96px"
101 />
102 </div>
103
104 {/* Award Info */}
105 <h3 className="text-lg font-bold text-gray-800 group-hover:text-vmi-red transition-colors mb-2">
106 {award.name}
107 </h3>
108 <p className="text-gray-600 text-sm line-clamp-2 mb-3">
109 {award.short_description}
110 </p>
111 <p className="text-vmi-red font-bold">
112 {award.recipient_count} VMI {award.recipient_count === 1 ? 'Recipient' : 'Recipients'}
113 </p>
114 </div>
115 </Link>
116 ))}
117 </div>
118 )}
119 </div>
120 </main>
121 </div>
122 );
123 }