Add horizontal ads to bottom of articles

components/HorizontalAdvertisement.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Link from "next/link";
+import horizontalAdvertisements from "../horizontalAdvertisements";
+import styles from "../styles/Advertisement.module.css";
+
+const HorizontalAdvertisement = (props: { index: number , section_id: number}) => {
+	let index = props.index % horizontalAdvertisements.length;
+	let section_id = props.section_id;
+
+	if (section_id != 0 && section_id != 2) {
+		return (
+			<Link href={horizontalAdvertisements[index].url}>
+				<div id={styles.parent_div}>
+					<Image
+						id={styles.image}
+						src={horizontalAdvertisements[index].image_src}
+						fill
+						alt={horizontalAdvertisements[index].name + " ad"}
+					/>
+				</div>
+			</Link>
+		);
+	}
+};
+
+export default HorizontalAdvertisement;

horizontalAdvertisements.ts

@@ -0,0 +1,8 @@
+const horizontalAdvertisements = [
+	{
+		name: "placeholder",
+		image_src: "/images/ads/horizontal_ad_placeholder.jpg",
+		url: "..",
+	},
+];
+export default horizontalAdvertisements;

pages/article/[article_slug].tsx

@@ -13,6 +13,7 @@ import ShareButton from "../../components/ShareButton";
 import Link from "next/link";
 import generate_contributors_jsx from "../../components/GenerateContributorsJSX";
 import { generateMetaTags } from "../../utils/generateMetaTags";
+import HorizontalAdvertisement from "../../components/HorizontalAdvertisement";
 
 interface Props {
 	article: ReceivedArticle;
@@ -160,7 +161,12 @@ function Article(props: Props) {
 
 					{/* <RecommendedArticles /> */}
 				</article>
-				<div id={styles.advertisements}></div>
+				<div id={styles.advertisements}>
+				<HorizontalAdvertisement
+					index={0}
+					section_id={section_id}
+				/>
+				</div>
 			</main>
 		</div>
 	);