missions
This commit is contained in:
parent
31cb24e274
commit
939a130f7c
@ -13,19 +13,19 @@ export default function MissionsLayout({
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
{/* Sidebar - simple with just nav items */}
|
||||
<div className="w-[235px] min-w-[235px] bg-white overflow-y-auto">
|
||||
<nav className="py-0">
|
||||
{/* Sidebar - precise sizing to match Courrier */}
|
||||
<div className="w-[234px] min-w-[234px] bg-white border-r border-gray-100 overflow-y-auto">
|
||||
<nav>
|
||||
<Link href="/missions" passHref>
|
||||
<div className={`px-6 py-3 ${pathname === "/missions" ? "bg-slate-100" : "hover:bg-slate-50"}`}>
|
||||
<span className="text-sm font-medium">Mes Missions</span>
|
||||
<div className={`px-6 py-[10px] ${pathname === "/missions" ? "bg-gray-50" : ""} hover:bg-gray-50`}>
|
||||
<span className="text-sm font-normal text-gray-700">Mes Missions</span>
|
||||
</div>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Main content - full-width, no padding */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{/* Main content - no padding, full container */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,69 +47,71 @@ export default function MissionsPage() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: "url('https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"
|
||||
}}
|
||||
>
|
||||
<div className="pt-0">
|
||||
<div className="flex items-center justify-between bg-black bg-opacity-30 px-4 py-2 mb-4">
|
||||
<h1 className="text-white text-sm font-normal">Gérez vos missions et opportunités de bénévolat</h1>
|
||||
<div className="flex items-center">
|
||||
<div className="relative mr-2">
|
||||
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Rechercher une mission..."
|
||||
className="pl-8 pr-2 py-1 text-sm h-8 bg-white border-0 rounded-sm w-48"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Link href="/missions/new">
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white h-8 text-sm px-3 py-0 rounded-sm">
|
||||
<Plus className="h-3.5 w-3.5 mr-1" />
|
||||
Nouvelle Mission
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex justify-between items-center bg-black/30 py-[6px] px-4">
|
||||
<h1 className="text-white text-xs font-normal">Gérez vos missions et opportunités de bénévolat</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-gray-500" />
|
||||
<Input
|
||||
placeholder="Rechercher une mission..."
|
||||
className="h-8 pl-7 pr-2 py-1 text-xs bg-white border-0 rounded-none w-48"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Link href="/missions/new">
|
||||
<Button className="h-8 rounded-none bg-blue-600 hover:bg-blue-700 text-white px-3 py-0 text-xs">
|
||||
<Plus className="h-3.5 w-3.5 mr-1" />
|
||||
Nouvelle Mission
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="px-4 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex-1 bg-cover bg-center p-0 overflow-auto"
|
||||
style={{
|
||||
backgroundImage: "url('https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"
|
||||
}}
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-0 p-0">
|
||||
{filteredMissions.map((mission, index) => (
|
||||
<div key={mission.id} className="bg-white rounded-sm shadow-md overflow-hidden max-w-full mx-0">
|
||||
<div className="p-0">
|
||||
<div className="flex items-center justify-between px-4 pt-4 pb-2">
|
||||
<span className="inline-block px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded-sm">
|
||||
{mission.category}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm">
|
||||
{mission.duration}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="px-4 pb-4">
|
||||
<h2 className="text-base font-semibold mb-1">{mission.title}</h2>
|
||||
<p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-1 mb-4">
|
||||
{mission.skills.map(skill => (
|
||||
<span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
<div key={mission.id} className="p-4">
|
||||
<div className="bg-white shadow-md overflow-hidden h-full">
|
||||
<div className="p-0">
|
||||
<div className="flex justify-between items-center px-4 pt-4 pb-2">
|
||||
<span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
|
||||
{mission.category}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
|
||||
{mission.duration}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="px-4 pb-4">
|
||||
<h2 className="text-base font-medium mb-2">{mission.title}</h2>
|
||||
<p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-1 mb-4">
|
||||
{mission.skills.map(skill => (
|
||||
<span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
|
||||
<span className="text-xs text-gray-500">
|
||||
Créée le {mission.createdAt.replace('2023-', '')}
|
||||
</span>
|
||||
<Link href={`/missions/${mission.id}`}>
|
||||
<Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-none">
|
||||
Voir détails
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
|
||||
<span className="text-xs text-gray-500">
|
||||
Créée le {mission.createdAt.replace('2023-', '')}
|
||||
</span>
|
||||
<Link href={`/missions/${mission.id}`}>
|
||||
<Button className="bg-black text-white text-xs px-3 py-1 h-7 rounded-sm">
|
||||
Voir détails
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user