feat: Add AdBanner

Signed-off-by: Sangam Kumar <[email protected]>

src/components/ad_banner.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const AdBanner = (props) => {
+  return (
+    <iframe
+      sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin"
+      src="//ws-in.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=IN&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=sangam03d-21&language=en_IN&marketplace=amazon&region=IN&placement=B0C5N4RM5Z&asins=B0C5N4RM5Z&linkId=4972ad9b2d27b18b08d0e65a6fd9c0d2&show_border=true&link_opens_in_new_window=true"
+      {...props}
+    ></iframe>
+  );
+};

src/components/blog/blog_post/blog_post.js

@@ -2,6 +2,7 @@ import dynamic from 'next/dynamic';
 import { MDXRemote } from 'next-mdx-remote';
 
 import { FeaturedImage } from 'components/blog/featured_image';
+import { AdBanner } from 'components/ad_banner';
 import { blogComponents } from 'utils/mdx';
 
 const BelowTheFold = dynamic(() => import('./below_the_fold'));
@@ -11,7 +12,7 @@ export const BlogPost = ({
   source,
 }) => {
   return (
-    <div className="bg-prism">
+    <div className="bg-prism lg:relative">
       <main className="m-auto py-8 prose lg:prose-lg xl:prose-xl">
         <article>
           <div className="px-4">
@@ -30,6 +31,9 @@ export const BlogPost = ({
           <BelowTheFold title={title} tags={tags} />
         </article>
       </main>
+      <div className="lg:absolute lg:right-0 items-center lg:top-1/2 lg:transform lg:-translate-y-1/2 p-8">
+        <AdBanner height={240} width={120} className="m-auto" />
+      </div>
     </div>
   );
 };