121 lines
4.6 KiB
TypeScript
121 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Plus, Search } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import Link from "next/link";
|
|
|
|
// Mock mission data until we implement the database
|
|
const mockMissions = [
|
|
{
|
|
id: 1,
|
|
title: "Développement d'une application web",
|
|
category: "Technology",
|
|
location: "Remote",
|
|
skills: ["React", "Node.js", "MongoDB"],
|
|
duration: "1-3 months",
|
|
createdAt: "2023-05-15"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Conception d'identité visuelle",
|
|
category: "Design",
|
|
location: "Paris",
|
|
skills: ["Adobe Photoshop", "Illustrator", "UI/UX"],
|
|
duration: "< 1 month",
|
|
createdAt: "2023-06-02"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Traduction de documentation technique",
|
|
category: "Writing",
|
|
location: "Hybrid",
|
|
skills: ["Translation", "Technical Writing", "English"],
|
|
duration: "> 3 months",
|
|
createdAt: "2023-06-10"
|
|
}
|
|
];
|
|
|
|
export default function MissionsPage() {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
|
|
const filteredMissions = mockMissions.filter(mission =>
|
|
mission.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
mission.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
mission.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
);
|
|
|
|
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>
|
|
</div>
|
|
|
|
<div className="px-4 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{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>
|
|
</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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|