Spaces:
Sleeping
Sleeping
| import { useState } from "react"; | |
| import { useTranslation } from "react-i18next"; | |
| import { useQuery } from "@tanstack/react-query"; | |
| import { projectsService } from "@/services/projects.service"; | |
| import { ProjectCard } from "@/components/cards/ProjectCard"; | |
| import { ProjectModal } from "@/components/modals/ProjectModal"; | |
| import { FadeIn } from "@/components/animations/FadeIn"; | |
| import { Skeleton } from "@/components/common/Skeleton"; | |
| import type { Project } from "@/types"; | |
| import { Search } from "lucide-react"; | |
| export function ProjectsSection() { | |
| const { t } = useTranslation(); | |
| const [search, setSearch] = useState(""); | |
| const [category, setCategory] = useState(""); | |
| const [selectedProject, setSelectedProject] = useState<Project | null>(null); | |
| const { data, isLoading } = useQuery({ | |
| queryKey: ["projects", search, category], | |
| queryFn: () => projectsService.getAll({ search, category }), | |
| }); | |
| const projects: Project[] = data?.data?.data || []; | |
| const categories = [...new Set(projects.map((p) => p.categoryEn))]; | |
| return ( | |
| <section id="projects" className="py-20"> | |
| <div className="max-w-7xl mx-auto px-4"> | |
| <FadeIn> | |
| <h2 className="text-3xl font-bold text-center text-slate-900 dark:text-white mb-8">{t("projects.title")}</h2> | |
| </FadeIn> | |
| <FadeIn> | |
| <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8"> | |
| <div className="relative max-w-md w-full mx-auto sm:mx-0"> | |
| <Search className="absolute left-3 top-3 w-4 h-4 text-slate-400" /> | |
| <input | |
| type="text" | |
| placeholder={t("projects.search")} | |
| value={search} | |
| onChange={(e) => setSearch(e.target.value)} | |
| className="w-full pl-10 pr-4 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" | |
| /> | |
| </div> | |
| <div className="flex gap-2 justify-center flex-wrap"> | |
| <button | |
| onClick={() => setCategory("")} | |
| className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ | |
| !category ? "bg-blue-600 text-white" : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700" | |
| }`} | |
| > | |
| {t("projects.all")} | |
| </button> | |
| {categories.map((cat) => ( | |
| <button | |
| key={cat} | |
| onClick={() => setCategory(cat)} | |
| className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ | |
| category === cat ? "bg-blue-600 text-white" : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700" | |
| }`} | |
| > | |
| {cat} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| </FadeIn> | |
| {isLoading ? ( | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| {Array.from({ length: 6 }).map((_, i) => ( | |
| <div key={i} className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 overflow-hidden"> | |
| <div className="relative h-56 bg-slate-200 dark:bg-slate-800 animate-pulse"> | |
| <div className="absolute top-4 right-4 w-12 h-12 rounded-full bg-slate-300 dark:bg-slate-700" /> | |
| </div> | |
| <div className="p-5 space-y-3"> | |
| <div className="h-5 w-20 bg-slate-200 dark:bg-slate-800 rounded-full" /> | |
| <div className="h-5 w-3/4 bg-slate-200 dark:bg-slate-800 rounded" /> | |
| <div className="space-y-2"> | |
| <div className="h-3 w-full bg-slate-200 dark:bg-slate-800 rounded" /> | |
| <div className="h-3 w-2/3 bg-slate-200 dark:bg-slate-800 rounded" /> | |
| </div> | |
| <div className="flex gap-2 pt-1"> | |
| <div className="h-6 w-16 bg-slate-200 dark:bg-slate-800 rounded" /> | |
| <div className="h-6 w-16 bg-slate-200 dark:bg-slate-800 rounded" /> | |
| </div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| ) : ( | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| {projects.map((project, i) => ( | |
| <FadeIn key={project.id} delay={i * 0.1}> | |
| <ProjectCard project={project} onClick={() => setSelectedProject(project)} /> | |
| </FadeIn> | |
| ))} | |
| </div> | |
| )} | |
| <ProjectModal project={selectedProject} open={!!selectedProject} onClose={() => setSelectedProject(null)} /> | |
| </div> | |
| </section> | |
| ); | |
| } |