feat: implement angular npm package use case in public template

Author: raktima-opensignlabs

apps/OpenSign/src/components/pdf/EmbedTab.js

@@ -8,12 +8,13 @@ function EmbedTab(props) {
   const { t } = useTranslation();
   const tabName = [
     { title: "React/Next.js", icon: "fa-brands fa-react", color: "#61dafb" },
+    { title: "JavaScript", icon: "fa-brands fa-js", color: "#ffd43b" },
     { title: "Angular", icon: "fa-brands fa-angular", color: "#ff5733" }
   ];
   const [activeTab, setActiveTab] = useState(0);
   // State to track if the code has been copied
   const [isCopied, setIsCopied] = useState(false);
-  const codeData = [
+  const reactCode = [
     {
       id: 0,
       title: "Installation",
@@ -44,6 +45,51 @@ export function App() {
     }
   ];
 
+  const angularCode = [
+    {
+      id: 0,
+      title: "Installation",
+      codeString: `
+npm install opensign-angular`
+    },
+    {
+      id: 1,
+      title: "Usage",
+      codeString: `
+import { Component } from '@angular/core';
+import {OpensignComponent} from "opensign-angular"
+ 
+@Component({
+  selector:'app-root',
+  standalone: true,
+  imports: [OpensignComponent], 
+  template: '<opensign templateId={"${props.templateId}"}
+            (onLoad)="handleLoad()"
+            (onLoadError)="handleError($event)"
+             ></opensign>',
+})
+export class AppComponent{
+  handleLoad() {
+    console.log("success");
+  }
+  handleError(error: string) {
+    console.log(error);
+  }
+
+}
+
+
+`
+    }
+  ];
+  const jsCodeString = `
+<script
+  src= "https://app.opensignlabs.com/static/js/public-template.bundle.js"
+  id="opensign-script"
+  templateId=${props.templateId}
+  ></script>
+  `;
+
   const handleCopy = (code, ind) => {
     copytoData(code);
     setIsCopied({ ...isCopied, [ind]: true });
@@ -75,7 +121,7 @@ export function App() {
       <div>
         {activeTab === 0 ? (
           <div className="mt-4">
-            {codeData.map((data, ind) => {
+            {reactCode.map((data, ind) => {
               return (
                 <div key={ind}>
                   <p className="font-medium text-[18px]">
@@ -133,10 +179,93 @@ export function App() {
               {t("public-template-mssg-5")}
             </p>
           </div>
+        ) : activeTab === 1 ? (
+          <div className="mt-4">
+            <div>
+              {/* <p className="font-medium text-[18px]">{t(`${data.title}`)}</p> */}
+
+              <div className="relative p-1">
+                <div
+                  onClick={() => handleCopy(jsCodeString, 0)}
+                  className="absolute top-[20px] right-[20px] cursor-pointer"
+                >
+                  <i className="fa-light fa-copy text-white mr-[2px]" />
+                  <span className=" text-white">
+                    {isCopied[0] ? t("copied-code") : t("copy-code")}
+                  </span>
+                </div>
+                <SyntaxHighlighter
+                  customStyle={{
+                    borderRadius: "15px"
+                  }}
+                  language="javascript"
+                  style={tomorrow}
+                >
+                  {jsCodeString}
+                </SyntaxHighlighter>
+              </div>
+            </div>
+          </div>
         ) : (
-          activeTab === 1 && (
-            <div className="mt-3">
-              <p>Feature comming soon</p>
+          activeTab === 2 && (
+            <div className="mt-4">
+              {angularCode.map((data, ind) => {
+                return (
+                  <div key={ind}>
+                    <p className="font-medium text-[18px]">
+                      {t(`${data.title}`)}
+                    </p>
+                    {ind === 0 && (
+                      <p className="text-[13px] mt-2">
+                        {t("public-template-mssg-1")}
+                      </p>
+                    )}
+                    <div className="relative p-1">
+                      <div
+                        onClick={() => handleCopy(data.codeString, ind)}
+                        className="absolute top-[20px] right-[20px] cursor-pointer"
+                      >
+                        <i className="fa-light fa-copy text-white mr-[2px]" />
+                        <span className=" text-white">
+                          {isCopied[ind] ? t("copied-code") : t("copy-code")}
+                        </span>
+                      </div>
+                      <SyntaxHighlighter
+                        customStyle={{
+                          borderRadius: "15px"
+                        }}
+                        language="javascript"
+                        style={tomorrow}
+                      >
+                        {data.codeString}
+                      </SyntaxHighlighter>
+                    </div>
+                    {ind === 0 && (
+                      <p className="text-[13px] mb-3">
+                        {t("public-template-mssg-2")}
+                      </p>
+                    )}
+                  </div>
+                );
+              })}
+
+              <p className="font-medium text-[15px]">
+                {t("public-template-mssg-3")}
+              </p>
+              <p className="my-[6px]">
+                {" "}
+                {t("public-template-mssg-4")}
+                <a
+                  href="https://www.npmjs.com/package/opensignme-angular"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="cursor-pointer text-blue-700  "
+                >
+                  {" "}
+                  OpenSign Angular package{" "}
+                </a>
+                {t("public-template-mssg-5")}
+              </p>
             </div>
           )
         )}