Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 1x 2x 1x 1x 1x 2x 2x 208x 2x 206x 206x 206x 2x 2x | import React from "react";
import { StaticQuery, graphql } from "gatsby";
import lozad from "lozad";
import RelatedCard from "@/components/RelatedCard";
import * as style from "./index.module.scss";
import { isBrowser } from "@/utils";
const RelatedPosts = ({
title,
tags,
}: {
title: string;
tags: readonly (string | undefined)[];
}) => {
React.useEffect(() => {
Eif (isBrowser()) {
const observer = lozad(".lozad", {
rootMargin: "10px 0px",
threshold: 0.1,
enableAutoReload: true,
loaded(el) {
el.classList.add("loaded");
},
});
observer.observe();
}
}, []);
return (
<StaticQuery<GatsbyTypes.Query>
query={graphql`
query {
allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
edges {
node {
excerpt
frontmatter {
title
headerImage
date
tags
}
fields {
slug
}
}
}
}
}
`}
render={(data) => {
const relatedPosts = data.allMarkdownRemark.edges.filter(
// eslint-disable-next-line array-callback-return,consistent-return
(edge) => {
if (edge.node.frontmatter?.title === title) {
return false;
}
Eif (edge.node.frontmatter?.tags) {
for (let i = 0; i < edge.node.frontmatter.tags.length; i++) {
return edge.node.frontmatter.tags[i] === tags[i];
}
}
}
);
Iif (!relatedPosts) {
return null;
}
return (
<div className={style.relatedPosts}>
<h2>
<span className="icon-newspaper-o" />
Related Posts
</h2>
{relatedPosts.map((relatedPost) => (
<div>
<RelatedCard
title={relatedPost.node.frontmatter?.title || ""}
tags={relatedPost.node.frontmatter?.tags || []}
date={relatedPost.node.frontmatter?.date || ""}
headerImage={relatedPost.node.frontmatter?.headerImage}
url={relatedPost.node.fields?.slug || ""}
/>
</div>
))}
</div>
);
}}
/>
);
};
export default RelatedPosts;
|