Unreal SDK Blueprint Examples (#379)

* started read-from-blockchain with images * read-from-blockchain changes * added more unreal blueprint examples, fixed TabbedContent to allow multiple on one page
0xsequence · Oct 22, 2024 · 52309b6 · 52309b6
1 parent 03b169f
commit 52309b6
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 161 deletions.
diff --git a/docs/components/TabbedContent/index.tsx b/docs/components/TabbedContent/index.tsx
@@ -1,25 +1,14 @@
-import { useEffect, useState } from 'react'
+import {useEffect, useState, useRef} from 'react'
 import './style.css'
 
 interface TabbedContentProps {
-  labels: string[]
-}
-
-function hideInactiveTabs(document: Document, activeTab: number): void {
-  const tabsContent = document.querySelectorAll('.tabbed-content__content')
-
-  tabsContent.forEach((content, index) => {
-    if (content instanceof HTMLElement) {
-      content.classList.add('hidden')
-      if (index === activeTab) {
-        content.classList.remove('hidden')
-      }
-    }
-  })
+  labels: string[];
+  children: React.ReactNode;
 }
 
 // To use this component and have it work correctly, you must encapsulate the content you want to hide and show in divs with the class "tabbed-content__content" in the order in which you send the labels.
-const TabbedContent = ({ labels }: TabbedContentProps) => {
+const TabbedContent = ({ labels, children }: TabbedContentProps) => {
+  const parentRef = useRef<HTMLDivElement | null>(null);
   const [activeTab, setActiveTab] = useState<number>(0)
 
   const handleTabChange = (index: number) => {
@@ -30,6 +19,21 @@ const TabbedContent = ({ labels }: TabbedContentProps) => {
     hideInactiveTabs(document, activeTab)
   }, [activeTab])
 
+  function hideInactiveTabs(document: Document, activeTab: number): void {
+    const children = parentRef.current?.children;
+    if (children === undefined) {
+      return;
+    }
+
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      child.classList.add('hidden')
+      if (i === activeTab) {
+        child.classList.remove('hidden')
+      }
+    }
+  }
+
   return (
     <div>
       <div className="tabbed-content__menu">
@@ -43,6 +47,9 @@ const TabbedContent = ({ labels }: TabbedContentProps) => {
           </button>
         ))}
       </div>
+      <div ref={parentRef}>
+        {children}
+      </div>
     </div>
   )
 }

diff --git a/docs/pages/guides/primary-sales.mdx b/docs/pages/guides/primary-sales.mdx
@@ -17,71 +17,70 @@ Accelerate your game growth by selling items directly to your players. In this g
 
 ## Clone the Primary Sales for Game Items boilerplate
 
-<TabbedContent labels={["Sequence CLI", "Github", "Github Template"]}/>
+<TabbedContent labels={["Sequence CLI", "Github", "Github Template"]}>
+    <div className="tabbed-content__content">
 
-<div className="tabbed-content__content">
+        #### You can easily clone the Primary Sales repository using the [Sequence CLI](https://github.com/0xsequence/sequence-cli/)
 
-#### You can easily clone the Primary Sales repository using the [Sequence CLI](https://github.com/0xsequence/sequence-cli/)
+        ```bash
+        npx sequence-cli boilerplates create-primary-drop-sale-starter
+        ```
 
-```bash
-npx sequence-cli boilerplates create-primary-drop-sale-starter
-```
-
-</div>
-<div className="tabbed-content__content">
-
-#### You can clone Primary Sales Repository from Github
+    </div>
+    <div className="tabbed-content__content">
 
-```shell
-git clone https://github.com/0xsequence/primary-drop-sale-1155-boilerplate.git
-```
+        #### You can clone Primary Sales Repository from Github
 
-<br/>
+        ```shell
+        git clone https://github.com/0xsequence/primary-drop-sale-1155-boilerplate.git
+        ```
 
-Then install and run:
+        <br/>
 
-<br/>
+        Then install and run:
 
-```shell
-pnpm install && pnpm dev
-```
+        <br/>
 
-<br/>
+        ```shell
+        pnpm install && pnpm dev
+        ```
 
-After you install the dependencies, `.env.example` will be automatically copied to `.env`, so you can test things out with pre-provided keys.
+        <br/>
 
-<br/>
+        After you install the dependencies, `.env.example` will be automatically copied to `.env`, so you can test things out with pre-provided keys.
 
-When you're ready, replace the contents of `.env` with your project's information.
+        <br/>
 
-</div>
-<div className="tabbed-content__content">
+        When you're ready, replace the contents of `.env` with your project's information.
 
-#### You can use the Primary Sales Repository Template from Github
+    </div>
+    <div className="tabbed-content__content">
 
-Go to https://github.com/0xsequence/primary-drop-sale-1155-boilerplate and click "Use this Template" in the top right corner.
-<br/>
+        #### You can use the Primary Sales Repository Template from Github
 
-Clone your newly made repo.
+        Go to https://github.com/0xsequence/primary-drop-sale-1155-boilerplate and click "Use this Template" in the top right corner.
+        <br/>
 
-<br/>
+        Clone your newly made repo.
 
-Then install and run:
+        <br/>
 
-<br/>
+        Then install and run:
 
-```shell
-pnpm install && pnpm dev
-```
+        <br/>
 
-<br/>
-After you install the dependencies, `.env.example` will be automatically copied to `.env`, so you can test things out with pre-provided keys.
-<br/>
+        ```shell
+        pnpm install && pnpm dev
+        ```
 
-When you're ready, replace the contents of `.env` with your project's information.
+        <br/>
+        After you install the dependencies, `.env.example` will be automatically copied to `.env`, so you can test things out with pre-provided keys.
+        <br/>
 
-</div>
+        When you're ready, replace the contents of `.env` with your project's information.
 
+    </div>
+</TabbedContent>
 
 ## Configure your own Primary Sales Contracts in the repository