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

missions

Browse Source
This commit is contained in:
alma 2025-05-04 23:58:15 +02:00
parent c00653c47a
commit 8dcc2d8ba1
2 changed files with 51 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/missions/layout.tsx
View File

@ -12,21 +12,26 @@ export default function MissionsLayout({
const pathname = usePathname(); const pathname = usePathname();
return ( return (
<main className="w-full h-screen bg-black"> <main className="w-full h-screen bg-white">
<div className="w-full h-full px-4 pt-12 pb-4 flex"> <div className="w-full h-full px-4 pt-12 pb-4 flex">
{/* Sidebar */} {/* Sidebar with light pink background */}
<div className="w-[234px] min-w-[234px] bg-white border-r border-gray-100 overflow-y-auto"> <div className="w-[234px] min-w-[234px] bg-pink-50 border-r border-gray-100 overflow-y-auto">
<nav> <nav>
<Link href="/missions" passHref> <Link href="/missions" passHref>
<div className={`px-6 py-[10px] ${pathname === "/missions" ? "bg-gray-50" : ""} hover:bg-gray-50`}> <div className={`px-6 py-[10px] ${pathname === "/missions" ? "bg-white" : ""} hover:bg-white`}>
<span className="text-sm font-normal text-gray-700">Mes Missions</span> <span className="text-sm font-normal text-gray-700">Mes Missions</span>
</div> </div>
</Link> </Link>
<Link href="/missions/new" passHref>
<div className={`px-6 py-[10px] ${pathname === "/missions/new" ? "bg-white" : ""} hover:bg-white`}>
<span className="text-sm font-normal text-gray-700">Nouvelle Mission</span>
</div>
</Link>
</nav> </nav>
</div> </div>
{/* Main content - matches artlab spacing */} {/* Main content - white background */}
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto bg-white">
{children} {children}
</div> </div>
</div> </div>

89
app/missions/page.tsx
View File

@ -1,10 +1,10 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import { Plus, Search } from "lucide-react"; import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button";
// Mock mission data until we implement the database // Mock mission data until we implement the database
const mockMissions = [ const mockMissions = [
@ -47,71 +47,58 @@ export default function MissionsPage() {
); );
return ( return (
<div className="flex flex-col h-full w-full"> <div className="flex flex-col h-full w-full bg-white">
<div className="flex justify-between items-center bg-black/30 py-[6px] px-4"> <div className="bg-white border-b border-gray-100 py-2 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 justify-between">
<div className="flex items-center gap-2"> <h1 className="text-gray-700 text-sm font-medium">Gérez vos missions et opportunités de bénévolat</h1>
<div className="relative"> <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" /> <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-gray-500" />
<Input <Input
placeholder="Rechercher une mission..." placeholder="Rechercher une mission..."
className="h-8 pl-7 pr-2 py-1 text-xs bg-white border-0 rounded-none w-48" className="h-8 pl-7 pr-2 py-1 text-xs bg-white border-gray-200 rounded-sm w-48"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
/> />
</div> </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>
</div> </div>
<div <div className="flex-1 overflow-auto bg-white p-4">
className="flex-1 bg-cover bg-center overflow-auto" <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
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) => ( {filteredMissions.map((mission, index) => (
<div key={mission.id} className="p-4"> <div key={mission.id} className="bg-white shadow-sm border border-gray-200 overflow-hidden h-full rounded-sm">
<div className="bg-white shadow-md overflow-hidden h-full"> <div className="p-0">
<div className="p-0"> <div className="flex justify-between items-center px-4 pt-4 pb-2">
<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">
<span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800"> {mission.category}
{mission.category} </span>
</span> <span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
<span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal"> {mission.duration}
{mission.duration} </span>
</span> </div>
</div>
<div className="px-4 pb-4"> <div className="px-4 pb-4">
<h2 className="text-base font-medium mb-2">{mission.title}</h2> <h2 className="text-base font-medium mb-2">{mission.title}</h2>
<p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p> <p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
<div className="flex flex-wrap gap-1 mb-4"> <div className="flex flex-wrap gap-1 mb-4">
{mission.skills.map(skill => ( {mission.skills.map(skill => (
<span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs"> <span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
{skill} {skill}
</span> </span>
))} ))}
</div>
</div> </div>
</div>
<div className="flex justify-between items-center px-4 py-2 border-t border-gray-100"> <div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
Créée le {mission.createdAt.replace('2023-', '')} Créée le {mission.createdAt.replace('2023-', '')}
</span> </span>
<Link href={`/missions/${mission.id}`}> <Link href={`/missions/${mission.id}`}>
<Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-none"> <Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-sm">
Voir détails Voir détails
</Button> </Button>
</Link> </Link>
</div>
</div> </div>
</div> </div>
</div> </div>