import { Head, Link } from '@inertiajs/react'; import { useEffect, useState } from 'react'; import { type BreadcrumbItem } from '@/types'; import AppLayout from '@/layouts/app-layout'; 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[]; } interface ProjectsApiResponse { projects: Project[]; projectType: ProjectType | null; } interface ProjectsPageProps { typeSlug?: string; } export default function Projects({ typeSlug }: ProjectsPageProps) { const [projectsData, setProjectsData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { setLoading(true); const url = `/api/projects/${encodeURIComponent(typeSlug || '')}`; fetch(url) .then(response => response.json()) .then(data => { setProjectsData(data); setLoading(false); }) .catch(error => { console.error('Error fetching projects:', error); setProjectsData(null); setLoading(false); }); }, [typeSlug]); const breadcrumbs: BreadcrumbItem[] = [ { title: 'Strona Główna', href: '/', }, { title: 'Projekty', href: '#', disabled: true, }, { title: projectsData?.projectType?.title || 'Projekty', href: typeSlug ? `/projekty/${typeSlug}` : '/projekty', }, ]; return (

{projectsData?.projectType?.title || 'Projekty'}

{projectsData?.projectType === null && projectsData?.projects && projectsData.projects.length > 0 && (
Wszystkie {Array.from(new Set( projectsData.projects.flatMap(project => project.projectTypes.map(type => JSON.stringify(type)) ) )).map(typeString => { const type = JSON.parse(typeString) as ProjectType; return ( {type.title} ); })}
)} {loading ? (
Wczytywanie...
) : !projectsData || !projectsData.projects || projectsData.projects.length === 0 ? (
Brak projektów.
) : (
{projectsData.projects.map((project) => { function stripHtml(html: string) { const htmlWithSpaces = html .replace(//gi, ' ') .replace(/<\/p>

/gi, ' ') .replace(/<\/div>

/gi, ' ') .replace(/<\/h[1-6]>/gi, ' ') .replace(/<\/li>
  • /gi, ' '); const div = document.createElement('div'); div.innerHTML = htmlWithSpaces; return (div.textContent || div.innerText || '') .replace(/\s+/g, ' ') .trim(); } const plainText = stripHtml(project.body); const shortText = plainText.length > 200 ? plainText.slice(0, 200).replace(/\s+$/, '') + '…' : plainText; return (
    {project.logo && (
    {project.title}
    )}

    {project.title}

    {project.projectTypes && project.projectTypes.length > 0 && (
    {project.projectTypes.map(type => ( {type.title} ))}
    )}
    {shortText}
    0 ? project.projectTypes[0].slug : (typeSlug || '')}/${project.slug}`} className="inline-block text-primary hover:underline font-semibold" > Czytaj więcej
    ); })}
    • )}
    ); }