Fixing Code Blocks

index.html

@@ -15,14 +15,14 @@
     <meta property="og:url" content="https://msgport.xyz/">
 
     <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:card" content="Msgport Twitter" />
     <meta property="twitter:url" content="https://twitter.com/msgport_xyz" />
     <meta property="twitter:title" content="Msgport" />
     <meta property="twitter:description" content="Programmable Cross-Chain Messaging Port" />
     <meta property="twitter:image" content="/assets/icons/x.svg" />
 
     <!-- SEO Meta Tags -->
-    <title>MSGPort</title>
+    <title>Msgport</title>
     <meta name="keywords" content="msgport, cross-chain, messaging, communication, programmable">
     <meta name="robots" content="index, follow">
     <meta name="author" content="Msgport Team">

src/components/EnablingDiverseItems.tsx

@@ -7,8 +7,12 @@ interface EnablingDiverseTypes {
 }
 
 const EnablingDiverseItems = ({ isDiverse, text }: EnablingDiverseTypes) => {
-  const activeTitle = menu[2].title;
-  const activeMenu = menu.find(({ title }) => title === activeTitle) || menu[2];
+  const activeTitle = menu[5].title;
+  const activeMenu = menu.find(({ title }) => title === activeTitle) || menu[5];
+
+  const activeTitleOrder = menu[6].title;
+  const activeMenuOrder =
+    menu.find(({ title }) => title === activeTitleOrder) || menu[6];
 
   return (
     <div className="lg:max-w-[27.313rem] xl:max-w-[35rem] 2xl:max-w-[40.625rem] 4xl:max-w-[50.625rem] 5xl:min-w-[70.625rem]">
@@ -34,8 +38,8 @@ const EnablingDiverseItems = ({ isDiverse, text }: EnablingDiverseTypes) => {
         {text}
       </p>
       <PrettyCode
-        code={activeMenu.code}
-        language={activeMenu.language}
+        code={isDiverse ? activeMenu.code : activeMenuOrder.code}
+        language={isDiverse ? activeMenu.language : activeMenuOrder.language}
         className="lg:max-w-[27.313rem] xl:max-w-[40.625rem] 4xl:max-w-[50.625rem] 5xl:max-w-[70.625rem]"
       />
       <a

src/components/MsgportInterface.tsx

@@ -1,30 +1,28 @@
 import { useState } from "react";
 import Container from "./Container";
-import data from "../data/BuildMsgButtons.json";
-// import datamobile from "../data/BuildMsgButtonsMobile.json";
 import PrettyCode from "./PrettyCode";
 import { menu } from "../data/code";
+import data from "../data/BuildMsgButtons.json";
 
 const MsgportInterface = () => {
-  const [selectedItem, setSelectedItem] = useState(0);
-  const activeTitle = menu[0].title;
-  const activeMenu = menu.find(({ title }) => title === activeTitle) || menu[0];
+  const [selectedItem, setSelectedItem] = useState(1);
+
+  const activeMenu =
+    menu.find((item) => item.title === data[selectedItem - 1]?.text) || menu[0];
+
   return (
     <Container classes="lg:flex items-center justify-between gap-[3.125rem] lg:gap-[3.125rem] xl:gap-[6.25rem] mt-[6.25rem] lg:mt-0">
       <div className="bg-[#000] rounded-[3.125rem] p-[1.25rem] lg:p-[3.125rem] lg:flex flex-col justify-end items-end hidden lg:max-w-[37.563rem] 2xl:max-w-[54.875rem] 4xl:max-w-[74.875rem] 5xl:min-w-[114.875rem]">
         <h2 className="text-[1.875rem] leading-[2.375rem] font-bold text-white tracking-[0.063rem]">
-          Msgport Interface
+          {activeMenu.title}
         </h2>
-        <p className="text-[1rem] leading-[1.563rem] font-[300] text-white mb-[1.875rem] mt-[0.625rem] opacity-60 tracking-[0.063rem]">
-          This interface provides developers with a generic message passing
-          interface to send arbitrary data between contracts on different
-          blockchain networks
+        <p className="text-[1rem] leading-[1.563rem] font-[300] text-white mb-[1.875rem] mt-[0.625rem] opacity-60 tracking-[0.063rem] text-right">
+          {activeMenu.description}
         </p>
-
         <PrettyCode
           code={activeMenu.code}
           language={activeMenu.language}
-          className="lg:max-w-[32rem] 2xl:max-w-[48.625rem] 4xl:max-w-[70rem] 5xl:min-w-[109rem]"
+          className="lg:max-w-[32rem] 2xl:max-w-[48.625rem] 4xl:min-w-[69rem] 5xl:min-w-[109rem]"
         />
       </div>
       <div className="flex flex-col lg:items-center lg:justify-center gap-[1.875rem] lg:w-[17.063rem] xl:w-[26.375rem] xl:px-[1.25rem] 3xl:px-0 4xl:w-[26.375rem]">
@@ -34,67 +32,37 @@ const MsgportInterface = () => {
         <h2 className="text-[1.875rem] leading-[2.375rem] lg:text-[3.75rem] lg:eading-[4.75rem] font-[700] text-[#00D448] tracking-[0.125rem] mt-[-1.875rem] lg:mt-0 lg:mb-[3.125rem]">
           Msgport
         </h2>
-
-        {data.map((item) => {
-          return (
-            <div className="w-full">
-              <button
-                key={item.id}
-                className={
-                  "text-[#000000] lg:text-[#2A2A2A] text-[1rem] font-[600] leading-[1.563rem] w-full rounded-[4rem] lg:flex items-center justify-center py-[1.063rem] lg:px-[1.25rem] "
-                }
-                style={{
-                  backgroundColor:
-                    selectedItem === item.id
-                      ? `${item.selected}`
-                      : `${item.bg}`,
-                }}
-                onClick={() => {
-                  if (selectedItem === item.id) {
-                    setSelectedItem(0);
-                  } else {
-                    setSelectedItem(item.id);
-                  }
-                }}
-              >
-                {item.text}
-              </button>
-              {selectedItem === item.id && (
-                <div className="lg:hidden mt-[-1.5rem]">
-                  <div className="bg-[#000] rounded-[3.125rem] p-[1.875rem_1.25rem_1.25rem]">
-                    <p className="text-[1rem] leading-[1.563rem] font-[300] text-[#F6F6F7] mb-[1.875rem] mt-[0.625rem] tracking-[0.063rem]">
-                      This interface provides developers with a generic message
-                      passing interface to send arbitrary data between contracts
-                      on different blockchain networks
-                    </p>
-                    <PrettyCode
-                      code={activeMenu.code}
-                      language={activeMenu.language}
-                      className="lg:max-w-[48.625rem]"
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          );
-        })}
-        {/* {datamobile.map((item) => {
-          return (
+        {data.map((item) => (
+          <div className="w-full" key={item.id}>
             <button
-              key={item.id}
               className={
-                "text-[#000000] lg:text-[#2A2A2A] text-[1rem] font-[600] leading-[1.563rem] w-full rounded-[4rem] flex items-center justify-center py-[1.063rem] lg:hidden"
+                "text-[1rem] font-[600] leading-[1.563rem] w-full rounded-[4rem] lg:flex items-center justify-center py-[1.063rem] lg:px-[1.25rem] "
               }
               style={{
                 backgroundColor:
-                  selectedItem === item.id ? `${item.selected}` : `${item.bg}`,
+                  selectedItem === item.id ? item.selected : item.bg,
+                color: selectedItem === item.id ? "#2a2a2a" : "#000000",
               }}
               onClick={() => setSelectedItem(item.id)}
             >
               {item.text}
             </button>
-          );
-        })} */}
+            {selectedItem === item.id && (
+              <div className="lg:hidden mt-[-1.5rem]">
+                <div className="bg-[#000] rounded-[3.125rem] p-[1.875rem_1.25rem_1.25rem]">
+                  <p className="text-[1rem] leading-[1.563rem] font-[300] text-[#F6F6F7] mb-[1.875rem] mt-[0.625rem] tracking-[0.063rem]">
+                    {activeMenu.description}
+                  </p>
+                  <PrettyCode
+                    code={activeMenu.code}
+                    language={activeMenu.language}
+                    className="lg:max-w-[48.625rem]"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
         <a
           href="https://github.com/msgport/msgport-demo"
           target="_blank"