import { Head, Link } from "@inertiajs/react"; import { ArrowLeft, ArrowRight, Calendar, MapPin } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import WebLayout from "@/layouts/WebLayout"; import type { ProjectsProps } from "@/types/ProjectsProps"; import "yet-another-react-lightbox/plugins/captions.css"; import "yet-another-react-lightbox/plugins/thumbnails.css"; import "yet-another-react-lightbox/styles.css"; import "yet-another-react-lightbox/plugins/captions.css"; import Lightbox from "yet-another-react-lightbox"; import Captions from "yet-another-react-lightbox/plugins/captions"; import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails"; import { cn } from "@/lib/utils"; interface ProjectShowProps { project: ProjectsProps; relatedProjects: ProjectsProps[]; } const ProjectDetail = ({ project, relatedProjects }: ProjectShowProps) => { const [lightboxIndex, setLightboxIndex] = useState(null); const splitParagraphs = (text: string) => { if (!text) return []; return text.split("\r\n").filter((paragraph) => paragraph.trim() !== ""); }; return (
Back to Projects

{project.title}

{/* Project Details */}
{project.title}

Overview

{project.description ? (
) : (

No documentation provided.

)}
{project.more_projects.map((more, i) => more.position === "right" ? (
{"More
) : (
{`
), )}

Project Gallery

{project.project_photos?.map((image, index) => (
setLightboxIndex(index)} src={image.image} alt={`Photo ${index + 1}`} className="w-full h-full object-cover hover:scale-105 grayscale-50 hover:grayscale-0 transition-transform duration-500" />
))}
{lightboxIndex !== null && ( setLightboxIndex(null)} slides={project.project_photos.map((img) => ({ src: img.image, title: project.title, description: project.title, }))} plugins={[Thumbnails, Captions]} /> )}

Project Details

{project.client.name}

Client

{project.client.name}

Location

{project.location}

Completion Status

{project.complete}

#

Category

{project.category.name}

Interested in a similar project?

{/* Related Projects */} {relatedProjects.length > 0 && (

Other Projects You Might Need

{relatedProjects.map((relatedProject) => (
{relatedProject.title}
{/* {relatedProject.category.name} */}

{relatedProject.title}

View Project
))}
)} ); }; export default ProjectDetail;