Add buy me a coffee widgets

choubari · Sep 12, 2023 · ae2f3e8 · ae2f3e8
1 parent f3de639
commit ae2f3e8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx
@@ -113,15 +113,25 @@ export default async function PostPage({ params }: PostPageProps) {
         />
       )}
       <Mdx code={post.body.code} />
-      <hr className="mt-12 border-accent" />
-      <div className="py-6 lg:py-10">
+      <hr className="mt-20 border-accent" />
+      <hr className="mt-1 border-accent" />
+      <div className="py-6 lg:py-10 flex items-center justify-between">
         <Link
           href="/blog"
           className="flex justify-center items-center hover:text-accent hover:underline"
         >
           <FaChevronLeft className="mr-2 h-4 w-4" />
           <p>See all posts</p>
         </Link>
+        <div className="flex flex-col items-end">
+          <p>Liked this?</p>
+          <a href="https://www.buymeacoffee.com/choubari" target="_blank">
+            <img
+              width={150}
+              src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=choubari&button_colour=12c5ca&font_colour=212733&font_family=Bree&outline_colour=000000&coffee_colour=FFDD00"
+            />
+          </a>
+        </div>
       </div>
     </article>
   );

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -73,6 +73,18 @@ export default function RootLayout({
           </main>
         </Providers>
         <Footer />
+        <script
+          data-name="BMC-Widget"
+          data-cfasync="false"
+          src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+          data-id="choubari"
+          data-description="Support me on Buy me a coffee!"
+          data-message="Thank you for visiting my website! You may want to buy me a coffee ;)"
+          data-color="#12c5ca"
+          data-position="Right"
+          data-x_margin="18"
+          data-y_margin="18"
+        ></script>
         <script
           type="text/javascript"
           async