80 lines
3.5 KiB
JavaScript
80 lines
3.5 KiB
JavaScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import data from "@/util/blog.json";
|
|
|
|
export default function BlogCta({ slug }) {
|
|
const [blogPost, setBlogPost] = useState(null);
|
|
|
|
useEffect(() => {
|
|
setBlogPost(data.find((item) => item.slug === slug));
|
|
}, [data, slug]);
|
|
|
|
if (!blogPost) return null;
|
|
|
|
return (
|
|
<div>
|
|
<div className="blog__details-bottom">
|
|
<div className="row align-items-center">
|
|
<div className="col-md-7">
|
|
<div className="post-tags">
|
|
<h5 className="title">Tags:</h5>
|
|
<ul className="list-wrap">
|
|
{blogPost.tags.map((tag) => (
|
|
<li key={tag}>
|
|
<Link href="#">{tag}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-5">
|
|
<div className="post-share">
|
|
<h5 className="title">Share:</h5>
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<Link
|
|
href={`https://www.facebook.com/sharer/sharer.php?u=${window.location.origin}/blog/${blogPost.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/${blogPost.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/${blogPost.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/${blogPost.slug}&media=&description=`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<i className="fab fa-pinterest-p" />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|