88 lines
3.9 KiB
TypeScript
88 lines
3.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import PageHeader from '../components/PageHeader';
|
|
import { groupProjectsByCategory } from '../constants';
|
|
import { MapPin, ChevronDown } from 'lucide-react';
|
|
|
|
const ProjectsPage: React.FC = () => {
|
|
const categories = groupProjectsByCategory();
|
|
const [openCategories, setOpenCategories] = useState<{ [key: string]: boolean }>({});
|
|
|
|
const toggleCategory = (categoryName: string) => {
|
|
setOpenCategories(prev => ({
|
|
...prev,
|
|
[categoryName]: !prev[categoryName]
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white pb-20">
|
|
<PageHeader
|
|
title="Наши проекты"
|
|
description="Галерея реализованных объектов, которыми мы гордимся. Более 10 лет успешной работы на рынке."
|
|
image="/media/images/headers/header-projects.png"
|
|
/>
|
|
|
|
<div className="container mx-auto px-6 py-20">
|
|
<div className="space-y-4">
|
|
{categories.map((category) => (
|
|
<div key={category.name} className="border border-gray-200 rounded-xl overflow-hidden">
|
|
{/* Заголовок категории */}
|
|
<button
|
|
onClick={() => toggleCategory(category.name)}
|
|
className="w-full flex items-center justify-between p-6 bg-gray-50 hover:bg-gray-100 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-lg">
|
|
{category.projects.length}
|
|
</div>
|
|
<h2 className="text-xl font-bold text-gray-900">{category.name}</h2>
|
|
</div>
|
|
<ChevronDown
|
|
size={24}
|
|
className={`text-brand-orange transition-transform duration-300 ${
|
|
openCategories[category.name] ? 'rotate-180' : ''
|
|
}`}
|
|
/>
|
|
</button>
|
|
|
|
{/* Список проектов */}
|
|
<div
|
|
className={`transition-all duration-300 ${
|
|
openCategories[category.name]
|
|
? 'max-h-[10000px] opacity-100'
|
|
: 'max-h-0 opacity-0 overflow-hidden'
|
|
}`}
|
|
>
|
|
<div className="p-4 space-y-3 bg-white">
|
|
{category.projects.map((project, index) => (
|
|
<div
|
|
key={project.id}
|
|
className="group cursor-pointer bg-gray-50 hover:bg-gray-100 rounded-lg p-5 transition-all duration-300 border border-gray-200 hover:border-brand-orange"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex-shrink-0 w-10 h-10 bg-white border-2 border-brand-orange text-brand-orange rounded-lg flex items-center justify-center font-bold text-sm">
|
|
{index + 1}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-base font-bold text-gray-900 mb-2 group-hover:text-brand-orange transition-colors">
|
|
{project.title}
|
|
</h3>
|
|
<div className="flex items-start gap-2 text-gray-600 text-sm">
|
|
<MapPin size={14} className="mt-1 flex-shrink-0 text-brand-orange" />
|
|
<span className="leading-relaxed">{project.description}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectsPage; |