120 lines
6.5 KiB
JavaScript
120 lines
6.5 KiB
JavaScript
"use client";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import data from "@/util/case-study.json";
|
|
|
|
export default function BlogDetailsClient({ slug }) {
|
|
const [casePost, setcasePost] = useState(null);
|
|
|
|
useEffect(() => {
|
|
setcasePost(data.find((item) => item.slug === slug));
|
|
}, [data, slug]);
|
|
|
|
if (!casePost) return null;
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="section-title text-center mb-40 tg-heading-subheading animation-style3">
|
|
<h2 className="title tg-element-title">Case Study: {casePost.title}</h2>
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<div className="project__details-top">
|
|
<div className="row">
|
|
<div className="col-70">
|
|
{casePost.img.endsWith(".png") || casePost.img.endsWith(".webp") ? (
|
|
<div className="project__details-thumb">
|
|
<img src={`/assets/img/case-study/${casePost.img}`} alt="" />
|
|
</div>
|
|
) : casePost.img.endsWith(".webm") || casePost.img.endsWith(".mp4") ? (
|
|
<div className="project__details-thumb">
|
|
<video src={`/assets/img/case-study/${casePost.img}`} autoPlay muted loop alt="" />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="col-30">
|
|
<div className="project__details-info">
|
|
<h4 className="title">Company Details</h4>
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<span>Client:</span>
|
|
{casePost.title}
|
|
</li>
|
|
<li>
|
|
<span>Website:</span>
|
|
<Link href={casePost.website} className="case-study-link">
|
|
{casePost.websiteName}
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<span>Industry:</span>
|
|
{casePost.industry}
|
|
</li>
|
|
<li>
|
|
<span>Services utilized:</span>
|
|
{casePost.utilized}
|
|
</li>
|
|
<li>
|
|
<span>Review:</span>
|
|
<Link href={casePost.reviewUrl} target="_blank">
|
|
<div className="case-study-rating">
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
<i className="fas fa-star" />
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<span>Share:</span>
|
|
<ul className="list-wrap project-social">
|
|
<li>
|
|
<Link
|
|
href={`https://www.facebook.com/sharer/sharer.php?u=${window.location.origin}/blog/${casePost.slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<i className="fab fa-facebook-f" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href={`https://twitter.com/intent/tweet?text=Check out this blog post: ${window.location.origin}/blog/${casePost.slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<i className="fab fa-twitter" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href={`https://www.instagram.com/p/${window.location.origin}/blog/${casePost.slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<i className="fab fa-instagram" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href={`https://pinterest.com/pin/create/bookmarklet/?url=${window.location.origin}/blog/${casePost.slug}&media=&description=`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<i className="fab fa-pinterest-p" />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|