68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
"use client";
|
|
import Image from "next/legacy/image";
|
|
import Link from "next/link";
|
|
import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
|
|
import { getImageUrl } from "@/lib/imageUtils";
|
|
import one from "@/public/images/case/one.png";
|
|
|
|
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="pt-120 pb-120 c-study fade-wrapper">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12 col-lg-9">
|
|
<h2 className="mt-8 title-anim fw-7 text-secondary mb-24">
|
|
Similar Case Studies
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="row vertical-column-gap-lg">
|
|
{caseStudy.related_case_studies.slice(0, 2).map((relatedCase) => (
|
|
<div key={relatedCase.id} className="col-12 col-lg-6">
|
|
<div className="c-study-single fade-top">
|
|
<div className="thumb mb-24">
|
|
<Link href={`/case-study/${relatedCase.slug}`} className="w-100">
|
|
<div className="parallax-image-wrap">
|
|
<div className="parallax-image-inner">
|
|
<Image
|
|
src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : one}
|
|
className="w-100 mh-300 parallax-image"
|
|
alt={relatedCase.title}
|
|
width={600}
|
|
height={400}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<Link href={`/case-study/${relatedCase.slug}`} className="mb-30 fw-6">
|
|
{relatedCase.category_name || 'Case Study'}
|
|
</Link>
|
|
<h4 className="fw-6 mt-8 text-secondary">
|
|
<Link href={`/case-study/${relatedCase.slug}`}>
|
|
{relatedCase.title}
|
|
</Link>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default RelatedCase;
|