From 2bb8e617b85e14687292791e6b5150a20fc9e692 Mon Sep 17 00:00:00 2001
From: nmsderp <130254323+nmsderp@users.noreply.github.com>
Date: Mon, 4 Mar 2024 20:44:57 -0500
Subject: [PATCH] likebtn

---
 src/components/sn-likebtn/LikeButton.jsx | 18 ++++++
 src/playground/render-interface.jsx      | 76 +++++++++++++-----------
 2 files changed, 58 insertions(+), 36 deletions(-)
 create mode 100644 src/components/sn-likebtn/LikeButton.jsx

diff --git a/src/components/sn-likebtn/LikeButton.jsx b/src/components/sn-likebtn/LikeButton.jsx
new file mode 100644
index 00000000000..42c4e5b3a92
--- /dev/null
+++ b/src/components/sn-likebtn/LikeButton.jsx
@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react';
+
+const LikeButton = () => {
+  useEffect(() => {
+    if (document.getElementById("likebtn_wjs")) return;
+    const script = document.createElement("script");
+    script.async = true;
+    script.id = "likebtn_wjs";
+    script.src = "//w.likebtn.com/js/w/widget.js";
+    document.getElementsByTagName("head")[0].appendChild(script);
+  }, []);
+
+  return (
+    <span className="likebtn-wrapper" data-theme="custom" data-vert="true" data-show_like_label="false"></span>
+  );
+};
+
+export default LikeButton;
diff --git a/src/playground/render-interface.jsx b/src/playground/render-interface.jsx
index f2c8787b298..deca7f7e3dc 100644
--- a/src/playground/render-interface.jsx
+++ b/src/playground/render-interface.jsx
@@ -37,6 +37,7 @@ import VoteFrame from './vote-frame.jsx';
 import MenuBar from '../components/menu-bar/menu-bar.jsx';
 import ProjectInput from '../components/tw-project-input/project-input.jsx';
 import FeaturedProjects from '../components/tw-featured-projects/featured-projects.jsx';
+import LikeButton from '../components/sn-likebtn/LikeButton.jsx';
 import Description from '../components/tw-description/description.jsx';
 import WebGlModal from '../containers/webgl-modal.jsx';
 import BrowserModal from '../components/browser-modal/browser-modal.jsx';
@@ -382,43 +383,46 @@ class Interface extends React.Component {
                                 </p>
                             </div>
                             {projectId && projectId !== '0' && (
-                                    <div>
-                                        <div className={styles.centerSector}>
-                                            <a
-                                                target="_blank"
-                                                rel="noreferrer"
-                                                href={`https://snail-ide.com/report?type=project&id=${projectId}`}
-                                                className={styles.reportLink}
-                                            >
-                                                <img
-                                                    src="https://studio.penguinmod.com/report_flag.png"
-                                                    alt="!"
-                                                />
-                                                {'Report'}
-                                            </a>
-                                        </div>
-                                        <div className={styles.centerSector}>
-                                            <a
-                                                target="_blank"
-                                                rel="noreferrer"
-                                                href="#"
-                                                className={styles.profilelink}
-                                                onClick={() => {
-                                                    const projectDetails = getProjectDetailsById(window.LastFetchedProject.remix);
-                                                    if (projectDetails && projectDetails.author) {
-                                                        const username = projectDetails.author.username;
-                                                        const profileUrl = `https://www.snail-ide.com/profile?user=${username}`;
-                                                        window.open(profileUrl);
-                                                    } else {
-                                                        console.error("Author details not available.");
-                                                        // Optionally, you can handle this case by setting a default author name or showing a message to the user
-                                                    }
-                                                }}
-                                            >
-                                                {'View Profile'}
-                                            </a>
-                                        </div>
+                                <div>
+                                    <div className={styles.centerSector}>
+                                    <a
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        href={`https://snail-ide.com/report?type=project&id=${projectId}`}
+                                        className={styles.reportLink}
+                                    >
+                                        <img
+                                        src="https://studio.penguinmod.com/report_flag.png"
+                                        alt="!"
+                                        />
+                                        {'Report'}
+                                    </a>
                                     </div>
+                                    <div className={styles.centerSector}>
+                                    <a
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        href="#"
+                                        className={styles.profilelink}
+                                        onClick={() => {
+                                        const projectDetails = getProjectDetailsById(window.LastFetchedProject.remix);
+                                        if (projectDetails && projectDetails.author) {
+                                            const username = projectDetails.author.username;
+                                            const profileUrl = `https://www.snail-ide.com/profile?user=${username}`;
+                                            window.open(profileUrl);
+                                        } else {
+                                            console.error("Author details not available.");
+                                            // Optionally, you can handle this case by setting a default author name or showing a message to the user
+                                        }
+                                        }}
+                                    >
+                                        {'View Profile'}
+                                    </a>
+                                    </div>
+                                    <div className={styles.centerSector}>
+                                    <LikeButton />
+                                    </div>
+                                </div>
                                 )}
 
                             <div className={styles.section}>