alma/NeahNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

missions ui

Browse Source
This commit is contained in:
alma 2025-05-06 13:33:36 +02:00
parent 5036f29842
commit 8b81d33a80
1 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/missions/page.tsx
View File

@ -200,23 +200,23 @@ export default function MissionsPage() {
const niveauColor = getNiveauBadgeColor(mission.niveau); const niveauColor = getNiveauBadgeColor(mission.niveau);
return ( return (
<div key={mission.id} className="bg-white shadow-md hover:shadow-lg transition-all duration-200 border border-gray-100 overflow-hidden h-full rounded-lg flex flex-col"> <div key={mission.id} className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-200 overflow-hidden h-full rounded-lg flex flex-col">
{/* Card Header with Name and Level */} {/* Card Header with Name and Level */}
<div className="px-6 pt-5 pb-4 flex justify-between items-center"> <div className="px-5 pt-4 pb-3 flex justify-between items-center border-b border-gray-100">
<h2 className="text-lg font-semibold text-gray-800 line-clamp-2 flex-1 pr-3">{mission.name}</h2> <h2 className="text-base font-medium text-gray-900 line-clamp-2 flex-1">{mission.name}</h2>
<span className={`ml-2 flex-shrink-0 text-sm font-bold px-3 py-1.5 rounded-full ${niveauColor}`}> <span className={`ml-2 flex-shrink-0 text-sm font-bold px-2.5 py-1.5 rounded-md ${niveauColor}`}>
{getNiveauLabel(mission.niveau)} {getNiveauLabel(mission.niveau)}
</span> </span>
</div> </div>
{/* Centered Logo */} {/* Centered Logo */}
<div className="flex justify-center items-center px-6 pt-2 pb-6 flex-grow"> <div className="flex justify-center items-center p-6 flex-grow">
<div className="w-40 h-40 relative shadow-sm rounded-md overflow-hidden"> <div className="w-40 h-40 relative">
{mission.logo ? ( {mission.logo ? (
<img <img
src={mission.logo || ''} src={mission.logo || ''}
alt={mission.name} alt={mission.name}
className="w-full h-full object-cover" className="w-full h-full object-cover rounded-md border border-gray-200"
onError={(e) => { onError={(e) => {
console.log("Logo failed to load:", mission.logo); console.log("Logo failed to load:", mission.logo);
console.log("Full URL attempted:", mission.logo); console.log("Full URL attempted:", mission.logo);
@ -231,51 +231,54 @@ export default function MissionsPage() {
/> />
) : null} ) : null}
<div <div
className={`logo-fallback w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-200 text-gray-600 text-3xl font-medium ${mission.logo ? 'hidden' : ''}`} className={`logo-fallback w-full h-full flex items-center justify-center bg-gray-100 rounded-md border border-gray-200 text-gray-500 text-3xl font-medium ${mission.logo ? 'hidden' : ''}`}
> >
{mission.name.slice(0, 2).toUpperCase()} {mission.name.slice(0, 2).toUpperCase()}
</div> </div>
</div> </div>
</div> </div>
{/* ODD scope icon - centered with nice styling */} {/* Card Content - Only Services section */}
{oddInfo.number && ( <div className="px-5 pb-3">
<div className="flex justify-center mb-4"> {mission.services && mission.services.length > 0 && (
<div className="flex items-center justify-center p-2 rounded-full bg-white shadow-md border border-gray-100"> <div>
<img <span className="text-sm font-medium text-gray-700 block mb-1">Services:</span>
src={oddInfo.iconPath} <div className="flex flex-wrap gap-1.5">
alt={oddInfo.label} {mission.services.map(service => (
className="w-12 h-12" <span key={service} className="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs font-medium">
onError={(e) => { {service}
// Fallback if image fails to load </span>
(e.target as HTMLImageElement).style.display = 'none'; ))}
}} </div>
/>
</div> </div>
</div> )}
)}
{/* Services section */} {/* ODD scope icon - moved here and enlarged */}
{mission.services && mission.services.length > 0 && ( {oddInfo.number && (
<div className="px-6 pb-4"> <div className="flex justify-center mt-4">
<div className="flex flex-wrap gap-2 justify-center"> <div className="flex items-center justify-center bg-gray-100 p-2 rounded-md">
{mission.services.map(service => ( <img
<span key={service} className="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-md text-xs font-medium border border-blue-100"> src={oddInfo.iconPath}
{service} alt={oddInfo.label}
</span> className="w-10 h-10"
))} onError={(e) => {
// Fallback if image fails to load
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
</div>
</div> </div>
</div> )}
)} </div>
{/* Card Footer */} {/* Card Footer */}
<div className="mt-auto px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-between items-center"> <div className="mt-auto px-5 py-3 border-t border-gray-100 bg-gray-50 flex justify-between items-center">
<span className="text-xs text-gray-500 font-medium"> <span className="text-xs text-gray-500">
{formatDate(mission.createdAt)} Créée le {formatDate(mission.createdAt)}
</span> </span>
<Link href={`/missions/${mission.id}`}> <Link href={`/missions/${mission.id}`}>
<Button className="bg-blue-600 hover:bg-blue-700 text-white text-xs px-4 py-2 h-8 rounded-md shadow-sm"> <Button className="bg-black hover:bg-gray-800 text-white text-xs px-3 py-1 h-7 rounded-md">
Voir détails Voir détails
</Button> </Button>
</Link> </Link>