import { Head, Link } from '@inertiajs/react'; import { useEffect, useState } from 'react'; import { type BreadcrumbItem } from '@/types'; import AppLayout from '@/layouts/app-layout'; import axios from 'axios'; import { SingleImageLightbox, ImageLightbox } from '@/components/image-lightbox'; import AttachmentsList from '@/components/attachments-list'; interface Photo { id: number; image_name: string; image_path: string; image_size: number; image_type: string; created_at: string; updated_at: string; } interface Attachment { id: number; file_name: string; file_path: string; file_size: number; file_type: string; created_at: string; updated_at: string; } interface ProjectType { id: number; title: string; slug: string; created_at: string; updated_at: string; } interface Project { id: number; title: string; slug: string; body: string; logo: string; active: boolean; published_at: string; created_at: string; updated_at: string; user_id: number; projectTypes: ProjectType[]; photos?: Photo[]; attachments?: Attachment[]; } interface ProjectApiResponse { project: Project; projectType: ProjectType; } interface ProjectDetailsProps { typeSlug: string; projectSlug: string; } export default function ProjectDetails({ typeSlug, projectSlug }: ProjectDetailsProps) { const [projectData, setProjectData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { setLoading(true); fetch(`/api/projects/${encodeURIComponent(typeSlug)}/${encodeURIComponent(projectSlug)}`) .then(response => response.json()) .then(data => { setProjectData(data); setLoading(false); }) .catch(error => { console.error('Error fetching project details:', error); setProjectData(null); setLoading(false); }); }, [typeSlug, projectSlug]); const truncateText = (text: string, maxLength: number): string => { if (text.length <= maxLength) return text; return text.slice(0, maxLength) + '…'; }; const getBreadcrumbs = (): BreadcrumbItem[] => [ { title: 'Strona Główna', href: '/', }, { title: 'Projekty', href: '#', disabled: true, }, { title: projectData?.projectType?.title || typeSlug.replace(/-/g, ' '), href: `/projekty/${typeSlug}`, }, { title: truncateText(projectData?.project?.title || projectSlug.replace(/-/g, ' '), 35), href: `/projekty/${typeSlug}/${projectSlug}`, }, ]; return (
{loading ? (
Wczytywanie zawartości...
) : !projectData || !projectData.project ? (
Nie znaleziono projektu.
) : (
{projectData.project.logo && (
{projectData.project.title}
)}

{projectData.project.title}

{projectData.project.projectTypes && projectData.project.projectTypes.length > 0 && (
{projectData.project.projectTypes.map(type => ( {type.title} ))}
)}
{projectData.project.photos && projectData.project.photos.length > 0 && (

Galeria

{projectData.project.photos.map((photo, index) => ( } initialIndex={index} /> ))}
)}
Powrót do listy projektów
)}
); }