68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
|
|
import { getImageUrl } from "@/lib/imageUtils";
|
|
|
|
interface RelatedCaseProps {
|
|
slug: string;
|
|
}
|
|
|
|
const RelatedCase = ({ slug }: RelatedCaseProps) => {
|
|
const { caseStudy, loading } = useCaseStudy(slug);
|
|
|
|
if (loading || !caseStudy || !caseStudy.related_case_studies || caseStudy.related_case_studies.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="related-case-studies luxury-related pt-120 pb-120">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="section-header">
|
|
<h2 className="section-title">Related Case Studies</h2>
|
|
<p className="section-subtitle">Explore similar projects and success stories</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row vertical-column-gap-lg">
|
|
{caseStudy.related_case_studies.slice(0, 3).map((relatedCase) => (
|
|
<div key={relatedCase.id} className="col-12 col-md-6 col-lg-4">
|
|
<div className="related-case-card">
|
|
<Link href={`/case-study/${relatedCase.slug}`} className="case-link">
|
|
<div className="case-image-wrapper">
|
|
<Image
|
|
src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : "/images/case/one.png"}
|
|
className="case-image"
|
|
alt={relatedCase.title}
|
|
width={400}
|
|
height={300}
|
|
/>
|
|
<div className="image-overlay">
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
<div className="case-content">
|
|
{relatedCase.category_name && (
|
|
<span className="case-category">
|
|
{relatedCase.category_name}
|
|
</span>
|
|
)}
|
|
<h3 className="case-title">{relatedCase.title}</h3>
|
|
{relatedCase.excerpt && (
|
|
<p className="case-excerpt">{relatedCase.excerpt}</p>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default RelatedCase;
|