vmi-virtual-memorial/vmi-wd-frontend / 62cb8d8

Browse files

carry document indicator everywhere names show up

Authored by espadonne
SHA
62cb8d8152f7d5706a7067ac4c058313fe8ea2da
Parents
e99d51f
Tree
a8e1987

5 changed files

StatusFile+-
M app/memorial/conflict/[id]/page.tsx 3 1
M app/memorial/page.tsx 4 1
M app/memorial/search/page.tsx 3 1
A components/DocumentIcon.tsx 18 0
M lib/api.ts 2 0
app/memorial/conflict/[id]/page.tsxmodified
@@ -5,6 +5,7 @@ import Link from 'next/link';
5
 import { useParams } from 'next/navigation';
5
 import { useParams } from 'next/navigation';
6
 import { getConflicts, getPeopleByConflict, Conflict, Person } from '@/lib/api';
6
 import { getConflicts, getPeopleByConflict, Conflict, Person } from '@/lib/api';
7
 import Header from '@/components/Header';
7
 import Header from '@/components/Header';
8
+import DocumentIcon from '@/components/DocumentIcon';
8
 
9
 
9
 export default function ConflictPage() {
10
 export default function ConflictPage() {
10
   const params = useParams();
11
   const params = useParams();
@@ -105,10 +106,11 @@ export default function ConflictPage() {
105
                   href={`/memorial/person/${person.id}`}
106
                   href={`/memorial/person/${person.id}`}
106
                   className="block p-6 border-2 border-gray-200 rounded-lg hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"
107
                   className="block p-6 border-2 border-gray-200 rounded-lg hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"
107
                 >
108
                 >
108
-                  <h3 className="text-xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors mb-2">
109
+                  <h3 className="text-xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors mb-2 flex items-center gap-2">
109
                     {person.full_display_name ? 
110
                     {person.full_display_name ? 
110
                       person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '') 
111
                       person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '') 
111
                       : person.display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')}
112
                       : person.display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')}
113
+                    {person.pdf_key && <DocumentIcon className="flex-shrink-0" />}
112
                   </h3>
114
                   </h3>
113
                   {person.rank && (
115
                   {person.rank && (
114
                     <p className="text-gray-700 font-semibold">{person.rank}</p>
116
                     <p className="text-gray-700 font-semibold">{person.rank}</p>
app/memorial/page.tsxmodified
@@ -3,6 +3,7 @@ 
3
 import { useState, useEffect } from 'react';
3
 import { useState, useEffect } from 'react';
4
 import Link from 'next/link';
4
 import Link from 'next/link';
5
 import Header from '@/components/Header';
5
 import Header from '@/components/Header';
6
+import DocumentIcon from '@/components/DocumentIcon';
6
 
7
 
7
 interface Person {
8
 interface Person {
8
   id: number;
9
   id: number;
@@ -10,6 +11,7 @@ interface Person {
10
   rank: string;
11
   rank: string;
11
   unit: string;
12
   unit: string;
12
   death_description?: string;
13
   death_description?: string;
14
+  pdf_key?: string;
13
 }
15
 }
14
 
16
 
15
 interface ConflictWithCasualties {
17
 interface ConflictWithCasualties {
@@ -179,8 +181,9 @@ export default function MemorialIndexPage() {
179
                         href={`/memorial/person/${person.id}`}
181
                         href={`/memorial/person/${person.id}`}
180
                         className="block p-4 border border-gray-200 rounded hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"
182
                         className="block p-4 border border-gray-200 rounded hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"
181
                       >
183
                       >
182
-                        <h3 className="font-bold text-gray-800 group-hover:text-vmi-red transition-colors">
184
+                        <h3 className="font-bold text-gray-800 group-hover:text-vmi-red transition-colors flex items-center gap-2">
183
                           {person.display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')}
185
                           {person.display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '')}
186
+                          {person.pdf_key && <DocumentIcon className="flex-shrink-0" />}
184
                         </h3>
187
                         </h3>
185
                         {person.rank && (
188
                         {person.rank && (
186
                           <p className="text-gray-700 text-sm">{person.rank}</p>
189
                           <p className="text-gray-700 text-sm">{person.rank}</p>
app/memorial/search/page.tsxmodified
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
4
 import Link from 'next/link';
4
 import Link from 'next/link';
5
 import { searchPeople, getSearchFilters, PersonSearchResult, SearchFilters } from '@/lib/api';
5
 import { searchPeople, getSearchFilters, PersonSearchResult, SearchFilters } from '@/lib/api';
6
 import Header from '@/components/Header';
6
 import Header from '@/components/Header';
7
+import DocumentIcon from '@/components/DocumentIcon';
7
 
8
 
8
 export default function MemorialSearchPage() {
9
 export default function MemorialSearchPage() {
9
   // Search state
10
   // Search state
@@ -264,10 +265,11 @@ export default function MemorialSearchPage() {
264
                     >
265
                     >
265
                       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
266
                       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
266
                         <div>
267
                         <div>
267
-                          <h3 className="text-xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors">
268
+                          <h3 className="text-xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors flex items-center gap-2">
268
                             {person.full_display_name ? 
269
                             {person.full_display_name ? 
269
                               person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '') 
270
                               person.full_display_name.replace(person.rank + ' ', '').replace(person.rank + ', ', '') 
270
                               : person.display_name}
271
                               : person.display_name}
272
+                            {person.pdf_key && <DocumentIcon className="flex-shrink-0" />}
271
                           </h3>
273
                           </h3>
272
                           {person.rank && (
274
                           {person.rank && (
273
                             <p className="text-gray-700">{person.rank}</p>
275
                             <p className="text-gray-700">{person.rank}</p>
components/DocumentIcon.tsxadded
@@ -0,0 +1,18 @@ 
1
+interface DocumentIconProps {
2
+  className?: string;
3
+  title?: string;
4
+}
5
+
6
+export default function DocumentIcon({ className = "", title = "Memorial document available" }: DocumentIconProps) {
7
+  return (
8
+    <span title={title} className={`inline-block ${className}`}>
9
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#b91c1c" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-file-text">
10
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
11
+        <polyline points="14 2 14 8 20 8" />
12
+        <line x1="16" y1="13" x2="8" y2="13" />
13
+        <line x1="16" y1="17" x2="8" y2="17" />
14
+        <line x1="10" y1="9" x2="9" y2="9" />
15
+      </svg>
16
+    </span>
17
+  );
18
+}
lib/api.tsmodified
@@ -79,6 +79,7 @@ export interface Person {
79
   class_year?: number;
79
   class_year?: number;
80
   full_display_name?: string;
80
   full_display_name?: string;
81
   death_description?: string;
81
   death_description?: string;
82
+  pdf_key?: string;
82
 }
83
 }
83
 
84
 
84
 export interface PersonDetail extends Person {
85
 export interface PersonDetail extends Person {
@@ -110,6 +111,7 @@ export interface PersonSearchResult {
110
   death_date_display?: string;
111
   death_date_display?: string;
111
   conflict_name: string;
112
   conflict_name: string;
112
   conflict_id: number;
113
   conflict_id: number;
114
+  pdf_key?: string;
113
 }
115
 }
114
 
116
 
115
 export interface SearchFilters {
117
 export interface SearchFilters {