@arcblock/ux 2.12.0 → 2.12.2

package/src/NavMenu/products.tsx

@@ -0,0 +1,378 @@
+import { useLayoutEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { Box, BoxProps, Grid } from '@mui/material';
+import { useWindowSize } from 'react-use';
+import SubItemGroup from './sub-item-group';
+import { Item } from './nav-menu';
+import { styled } from '../Theme';
+import { useNavMenuContext } from './nav-menu-context';
+import { translate } from '../Locale/util';
+import { useLocaleContext } from '../Locale/context';
+
+import AIKitSvg from './images/ai-kit.svg?react';
+import NftStudioSvg from './images/nft-studio.svg?react';
+import CreatorStudioSvg from './images/creator-studio.svg?react';
+import AigneSvg from './images/aigne.svg?react';
+import AistroSvg from './images/aistro.svg?react';
+import BlockletLauncherSvg from './images/blocklet-launcher.svg?react';
+import BlockletStoreSvg from './images/blocklet-store.svg?react';
+import Web3KitSvg from './images/web3-kit.svg?react';
+import BlockletFrameworkSvg from './images/blocklet-framework.svg?react';
+import AbtNetworkSvg from './images/abt-network.svg?react';
+import BlockletServerSvg from './images/blocklet-server.svg?react';
+import OCAPSvg from './images/OCAP.svg?react';
+import DidSvg from './images/did.svg?react';
+import DidWalletSvg from './images/did-wallet.svg?react';
+import DidNameServiceSvg from './images/did-name-service.svg?react';
+import VCSvg from './images/vc.svg?react';
+import DidConnectSvg from './images/did-connect.svg?react';
+
+const translations = {
+  en: {
+    groups: {
+      applications: 'Applications',
+      components: 'Components',
+      computeStorage: 'Compute/Storage',
+      identity: 'Identity',
+    },
+    products: {
+      nftStudio: {
+        description: 'Toolkit for NFT creation',
+      },
+      creatorStudio: {
+        description: "Content creators' Swiss knife",
+      },
+      aigne: {
+        description: 'Chat with AIGNE',
+      },
+      aistro: {
+        description: 'Al Language Model Astrologer',
+      },
+      blockletLauncher: {
+        description: 'Launch your blocklet here',
+      },
+      alKit: {
+        description: 'Empowers Al for application',
+      },
+      blockletStore: {
+        description: 'App Store for all Blocklets',
+      },
+      web3Kit: {
+        description: 'Provides series components',
+      },
+      blockletFramework: {
+        description: 'Launch your blocklet here',
+      },
+      didSpaces: {
+        description: 'Decentralized storage space',
+      },
+      abtNetwork: {
+        description: "ArcBlock's blockchain system",
+      },
+      blockletServer: {
+        description: 'Runtime Container Service',
+      },
+      osar: {
+        description: 'Supports multpy blockchains',
+      },
+      did: {
+        description: 'Decentralized Identity',
+      },
+      didWallet: {
+        description: 'Intelligent digital wallet',
+      },
+      didNameService: {
+        description: 'Purchase/host domain',
+      },
+      vc: {
+        description: 'Verifiable Credentials',
+      },
+      didConnect: {
+        description: 'Login with DID',
+      },
+    },
+  },
+  zh: {
+    groups: {
+      applications: '应用',
+      components: '组件',
+      computeStorage: '计算/存储',
+      identity: '身份',
+    },
+    products: {
+      nftStudio: {
+        description: 'NFT 创作工具包',
+      },
+      creatorStudio: {
+        description: '内容创作者的瑞士军刀',
+      },
+      aigne: {
+        description: '与 AIGNE 聊天',
+      },
+      aistro: {
+        description: 'Al 语言模型占星师',
+      },
+      blockletLauncher: {
+        description: '在这里启动你的 blocklet',
+      },
+      alKit: {
+        description: '为应用赋能 Al',
+      },
+      blockletStore: {
+        description: '所有 Blocklets 的应用商店',
+      },
+      web3Kit: {
+        description: '提供系列组件',
+      },
+      blockletFramework: {
+        description: '在这里启动你的 blocklet',
+      },
+      didSpaces: {
+        description: '去中心化存储空间',
+      },
+      abtNetwork: {
+        description: 'ArcBlock 的区块链系统',
+      },
+      blockletServer: {
+        description: '运行时容器服务',
+      },
+      osar: {
+        description: '支持多链',
+      },
+      did: {
+        description: '去中心化身份',
+      },
+      didWallet: {
+        description: '智能数字钱包',
+      },
+      didNameService: {
+        description: '购买/托管域名',
+      },
+      vc: {
+        description: '可验证凭证',
+      },
+      didConnect: {
+        description: '使用 DID 登录',
+      },
+    },
+  },
+};
+
+const Wrapper = styled(Box)`
+  width: 80vw;
+  max-width: 900px;
+  padding: 8px;
+  background: #f7f9fc;
+  border-radius: 8px;
+
+  &.is-inline {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 0;
+    .nav-menu-sub-item-group {
+      padding: 8px 16px;
+      border-radius: 0;
+    }
+  }
+
+  .nav-menu-sub-item-group + .nav-menu-sub-item-group {
+    margin-top: 8px;
+  }
+  .MuiGrid-container + .MuiGrid-container {
+    margin-top: 0px;
+  }
+`;
+
+export interface ProductsProps extends BoxProps {
+  isOpen?: boolean;
+}
+
+export default function Products({ className, isOpen, ...rest }: ProductsProps) {
+  const { mode } = useNavMenuContext();
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { width, height } = useWindowSize();
+  const { locale = 'en' } = useLocaleContext() || {};
+  const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
+  const groups = useCreation(() => {
+    return [
+      {
+        type: 'Group',
+        label: t('groups.applications'),
+        children: [
+          [
+            {
+              label: <Link to={`https://www.nftstudio.rocks/${locale}`}>NFT Studio</Link>,
+              description: t('products.nftStudio.description'),
+              icon: <NftStudioSvg />,
+            },
+            {
+              label: (
+                <Link to={`https://www.arcblock.io/content/collections/${locale}/creator-studio`}>Creator Studio</Link>
+              ),
+              description: t('products.creatorStudio.description'),
+              icon: <CreatorStudioSvg />,
+            },
+          ],
+          [
+            {
+              label: <Link to={`https://www.aigne.io/${locale}`}>AIGNE</Link>,
+              description: t('products.aigne.description'),
+              icon: <AigneSvg />,
+            },
+            {
+              label: <Link to={`https://www.aistro.io/${locale}`}>Aistro</Link>,
+              description: t('products.aistro.description'),
+              icon: <AistroSvg />,
+            },
+          ],
+        ],
+      },
+      {
+        type: 'Group',
+        label: t('groups.components'),
+        children: [
+          [
+            {
+              label: <Link to={`https://launcher.arcblock.io/${locale}`}>Blocklet Launcher</Link>,
+              description: t('products.blockletLauncher.description'),
+              icon: <BlockletLauncherSvg />,
+            },
+            {
+              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/ai-kit`}>Al Kit</Link>,
+              description: t('products.alKit.description'),
+              icon: <AIKitSvg />,
+            },
+          ],
+          [
+            {
+              label: <Link to={`https://store.blocklet.dev/${locale}`}>Blocklet Store</Link>,
+              description: t('products.blockletStore.description'),
+              icon: <BlockletStoreSvg />,
+            },
+            {
+              label: <Link to={`https://www.web3kit.rocks/${locale}`}>Web3 Kit</Link>,
+              description: t('products.web3Kit.description'),
+              icon: <Web3KitSvg />,
+            },
+          ],
+        ],
+      },
+      {
+        type: 'Group',
+        label: t('groups.computeStorage'),
+        children: [
+          [
+            {
+              label: (
+                <Link to={`https://www.arcblock.io/content/collections/${locale}/blocklet`}>Blocklet Framework</Link>
+              ),
+              description: t('products.blockletFramework.description'),
+              icon: <BlockletFrameworkSvg />,
+            },
+            {
+              label: <Link to={`https://www.didspaces.com/${locale}`}>DID Spaces</Link>,
+              description: t('products.didSpaces.description'),
+              icon: <DidSvg />,
+            },
+            {
+              label: <Link to={`https://main.abtnetwork.io/${locale}`}>ABT Network</Link>,
+              description: t('products.abtNetwork.description'),
+              icon: <AbtNetworkSvg />,
+            },
+          ],
+          [
+            {
+              label: (
+                <Link to={`https://www.arcblock.io/content/collections/${locale}/blocklet-server`}>
+                  Blocklet Server
+                </Link>
+              ),
+              description: t('products.blockletServer.description'),
+              icon: <BlockletServerSvg />,
+            },
+            {
+              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/blockchain`}>ОСАР</Link>,
+              description: t('products.osar.description'),
+              icon: <OCAPSvg />,
+            },
+          ],
+        ],
+      },
+      {
+        type: 'Group',
+        label: t('groups.identity'),
+        children: [
+          [
+            {
+              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/did`}>DID</Link>,
+              description: t('products.did.description'),
+              icon: <DidSvg />,
+            },
+            {
+              label: <Link to={`https://www.didwallet.io/${locale}`}>DID Wallet</Link>,
+              description: t('products.didWallet.description'),
+              icon: <DidWalletSvg />,
+            },
+            {
+              label: <Link to={`https://www.didnames.io/${locale}`}>DID Name Service</Link>,
+              description: t('products.didNameService.description'),
+              icon: <DidNameServiceSvg />,
+            },
+          ],
+          [
+            {
+              label: <Link to={`https://www.arcblock.io/content/collections/${locale}/verifiable-credential`}>VC</Link>,
+              description: t('products.vc.description'),
+              icon: <VCSvg />,
+            },
+            {
+              label: <Link to={`https://www.didconnect.io/${locale}`}>DID Connect</Link>,
+              description: t('products.didConnect.description'),
+              icon: <DidConnectSvg />,
+            },
+          ],
+        ],
+      },
+    ];
+  }, [t, locale]);
+
+  // 防止弹框超出 window
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    if (!isOpen) {
+      wrapper.style.transform = '';
+      return;
+    }
+
+    const rect = wrapper.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    if (rect.right > windowWidth) {
+      const offset = rect.right - windowWidth;
+      wrapper.style.transform = `translateX(-${offset + 16}px)`;
+    } else if (rect.left < 0) {
+      wrapper.style.transform = `translateX(${Math.abs(rect.left) + 16}px)`;
+    } else {
+      wrapper.style.transform = '';
+    }
+  }, [width, height, isOpen]);
+
+  return (
+    <Wrapper ref={wrapperRef} className={`is-${mode} ${className}`} {...rest}>
+      {groups.map((group) => (
+        <SubItemGroup key={group.label} label={group.label}>
+          {group.children.map((rows, i) => (
+            <Grid container key={i} columnSpacing={1} rowSpacing={1}>
+              {rows.map((item, j) => (
+                <Grid item xs={12} md={6} lg={4} key={j}>
+                  <Item variant="panel" style={{ padding: '8px' }} {...item} />
+                </Grid>
+              ))}
+            </Grid>
+          ))}
+        </SubItemGroup>
+      ))}
+    </Wrapper>
+  );
+}