add view

TrustlessComputer · Sep 5, 2024 · ca9e3df · ca9e3df
1 parent dd2e2e6
commit ca9e3df
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 37 deletions.
diff --git a/src/modules/blockchains/Buy/component4/LegoParent/index.tsx b/src/modules/blockchains/Buy/component4/LegoParent/index.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
 import cn from 'classnames';
 import Image from 'next/image';
+import React from 'react';
 
 import SvgInset from '@/components/SvgInset';
 
 import { adjustBrightness } from '../../utils';
 
-import styles from './styles.module.scss';
+import { iconToolNames } from '@/modules/blockchains/Buy/Buy.data';
+import { useCaptureStore } from '@/modules/blockchains/Buy/stores/index_v3';
+import { DappType } from '@/modules/blockchains/dapp/types';
 import { useAppSelector } from '@/stores/hooks';
 import { dappSelector } from '@/stores/states/dapp/selector';
-import { DappType } from '@/modules/blockchains/dapp/types';
 import { DappModel } from '@/types/customize-model';
 import { Text } from '@chakra-ui/react';
-import { useCaptureStore } from '@/modules/blockchains/Buy/stores/index_v3';
-import { iconToolNames } from '@/modules/blockchains/Buy/Buy.data';
+import styles from './styles.module.scss';
 
 type Props = {
   zIndex?: number;
@@ -29,18 +29,18 @@ type Props = {
 };
 
 const LegoParent = ({
-                      zIndex = 0,
-                      background = '#A041FF',
-                      disabled = false,
-                      title = '',
-                      icon,
-                      children,
-                      smallMarginHeaderTop = false,
-                      label,
-                      dapp,
-                      linkDownloadFile,
-                      ...rest
-                    }: Props) => {
+  zIndex = 0,
+  background = '#A041FF',
+  disabled = false,
+  title = '',
+  icon,
+  children,
+  smallMarginHeaderTop = false,
+  label,
+  dapp,
+  linkDownloadFile,
+  ...rest
+}: Props) => {
   const legoRef = React.useRef<HTMLDivElement | null>(null);
   const headerRef = React.useRef<HTMLDivElement | null>(null);
   const footerRef = React.useRef<HTMLDivElement | null>(null);
@@ -60,7 +60,9 @@ const LegoParent = ({
       case DappType.yologame: {
         if (!label?.actionID) return;
         window.open(
-          `${dappState?.chain?.dappURL || ''}/apps/yolo-games?pool_id=${label.actionID}`,
+          `${dappState?.chain?.dappURL || ''}/apps/yolo-games?pool_id=${
+            label.actionID
+          }`,
         );
         return;
       }
@@ -109,7 +111,7 @@ const LegoParent = ({
             styles.lego__header__piece__top,
             {
               [styles.lego__header__piece__top__smallMargin]:
-              smallMarginHeaderTop,
+                smallMarginHeaderTop,
             },
           )}
         >
@@ -119,6 +121,7 @@ const LegoParent = ({
         <div className={styles.lego__header__title}>
           {_icon && <Image src={_icon} width={20} height={20} alt="_icon" />}
           {title}
+
           {linkDownloadFile && (
             <Text
               as={'a'}
@@ -141,25 +144,29 @@ const LegoParent = ({
         </div>
 
         {label && (
-          <div
-            className={`${
-              cn(
+          <>
+            <div
+              className={`${cn(
                 styles.lego__header__label,
                 styles[`lego__header__label__${label.status}`],
-              )
-            } ${
-              isCapture ? styles.label_margin : ''
-            }`}
-            style={{
-              // @ts-ignore
-              // prettier-ignore
-              '--label-background': label.background ? label.background : undefined,
-              '--label-color': label.color ? label.color : undefined,
-            }}
-            onClick={() => handleLabelClick()}
-          >
-            {label.title}
-          </div>
+              )} ${isCapture ? styles.label_margin : ''}`}
+              style={{
+                // @ts-ignore
+                // prettier-ignore
+                '--label-background': label.background ? label.background : undefined,
+                '--label-color': label.color ? label.color : undefined,
+              }}
+              onClick={() => handleLabelClick()}
+            >
+              {label.title}
+            </div>
+
+            {label.status === 'deployed' && (
+              <span onClick={() => handleLabelClick()} className={styles.view}>
+                View
+              </span>
+            )}
+          </>
         )}
       </div>
 
@@ -175,7 +182,7 @@ const LegoParent = ({
             styles.lego__footer__piece__bottom,
             {
               [styles.lego__footer__piece__bottom__smallMargin]:
-              smallMarginHeaderTop,
+                smallMarginHeaderTop,
             },
           )}
         >

diff --git a/src/modules/blockchains/Buy/component4/LegoParent/styles.module.scss b/src/modules/blockchains/Buy/component4/LegoParent/styles.module.scss
@@ -180,3 +180,23 @@
 .label_margin {
   margin-top: -15px;
 }
+
+.view {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 48%;
+  transform: translateY(-48%) translateX(calc(100% + 100px));
+
+  border-radius: 4px;
+  padding: 0 14px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  text-decoration: underline;
+  color: black;
+
+  &:hover {
+    color: blue;
+  }
+}