revamp fusebox

docs/basics/fuse-v2-next-chapter/2023-technical-roadmap.mdx

@@ -8,7 +8,7 @@ sidebar_position: 8
 
 ### Q1
 
-* Release the new [Fuse mobile SDK](../../developers/getting-started.mdx), providing tools to build mobile cross-platform Web3 apps and wallets – **Live.**
+* Release the new [Fuse mobile SDK](../../fuse-box/getting-started.mdx), providing tools to build mobile cross-platform Web3 apps and wallets – **Live.**
 * Launch API Service: The Fuse API Service is a vital part of the services provided to Operators and powers the Fuse SDK. Its components will serve as the foundation for [Power Validators](../fuse-v2-next-chapter/power-validators) services. – **Live**
 * The [WooCommerce Payment plugin](https://wordpress.org/plugins/charge-web3/) is available for WordPress stores. – **Live**
 * Fuse Improvement Proposal (FIP) for Power Validators.

docs/basics/getting-started-with-fuse/faqs.mdx

@@ -15,7 +15,7 @@ The Fuse blockchain is for any product or service looking for enterprise-grade,
 
 ### What is the Fuse SDK?
 
-The Fuse SDK lets companies plug Web3 services and crypto payments into their existing mobile products with business-ready smart contract wallets, eliminating the complexities of Web3. [Learn more](../../developers/fuse-box/fuse-sdk/)
+The Fuse SDK lets companies plug Web3 services and crypto payments into their existing mobile products with business-ready smart contract wallets, eliminating the complexities of Web3. [Learn more](../../fuse-box/sdk/)
 
 ### How is Fuse Network different from other blockchains?
 

docs/basics/intro-to-fuse/fuse-payment-infrastructure.mdx

@@ -25,7 +25,7 @@ The Fuse team has, thus, been developing and iterating on a multi-faceted infras
 
 It should be noted that some of the components of this stack are not only utilized as a part of the payment-centric infrastructure but are also open to and help other applications to be deployed and run on the Fuse Network blockchain.
 
-If you are a developer or a business wishing to research or implement web3 payments, Fuse's current infrastructure stack is described in more technical detail in the [Fuse Stack](../../developers/fuse-box/architecture.mdx) section.
+If you are a developer or a business wishing to research or implement web3 payments, Fuse's current infrastructure stack is described in more technical detail in the [Fuse Stack](../../fuse-box/architecture.mdx) section.
 
 In the subsequent parts of this section, we will briefly discuss the fundamental principles on which the workings of the Fuse payment-focused infrastructure are based.
 

docs/components/PlatformTabItem.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import TabItem from '@theme-original/TabItem'
+
+export default function PlatformTabItem(props) {
+ return (
+ <>
+ <TabItem className="platform-tabs--items" {...props} />
+ </>
+ )
+}

docs/components/PlatformTabs.js

@@ -0,0 +1,100 @@
+import React from 'react'
+import Tabs from './Tabs'
+
+const PLATFORM_MAP = [
+ {
+ value: 'web',
+ label: 'Web'
+ },
+ {
+ value: 'ios',
+ label: 'iOS'
+ },
+ {
+ value: 'android',
+ label: 'Android'
+ },
+ {
+ value: 'flutter',
+ label: 'Flutter'
+ },
+ {
+ value: 'react',
+ label: 'React'
+ },
+ {
+ value: 'vue',
+ label: 'Vue'
+ },
+ {
+ value: 'html',
+ label: 'HTML'
+ },
+ {
+ value: 'javascript',
+ label: 'JavaScript'
+ },
+ {
+ value: 'react-native',
+ label: 'React Native'
+ },
+ {
+ value: 'unity',
+ label: 'Unity'
+ },
+ {
+ value: 'csharp',
+ label: 'C#'
+ },
+ {
+ value: 'mobile',
+ label: 'Mobile'
+ },
+ {
+ value: 'wagmi',
+ label: 'Wagmi'
+ },
+ {
+ value: 'wagmi1',
+ label: 'Wagmi v1'
+ },
+ {
+ value: 'other',
+ label: 'Other'
+ },
+ {
+ value: 'viem',
+ label: 'Viem'
+ },
+ {
+ value: 'ethers',
+ label: 'Ethers'
+ },
+ {
+ value: 'ethers5',
+ label: 'Ethers v5'
+ },
+ {
+ value: 'web3js',
+ label: 'Web3.js'
+ }
+]
+
+const valuesBuilder = activeOptions => {
+ const values = PLATFORM_MAP.filter(({ value }) => activeOptions.includes(value))
+ return values.length ? values : PLATFORM_MAP
+}
+
+export default function PlatformTabs(props) {
+ const values = valuesBuilder(props.activeOptions)
+ return (
+ <>
+ <Tabs
+ className="platform-tabs"
+ queryString={props.queryString || 'platform'}
+ values={values}
+ {...props}
+ />
+ </>
+ )
+}