resolve issue

gravity-ui · Dec 5, 2023 · 1165260 · 1165260
1 parent 4d6cc0c
commit 1165260
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/src/blocks/CustomBanner/CustomBanner.scss b/src/blocks/CustomBanner/CustomBanner.scss
@@ -61,9 +61,10 @@ $block: '.#{variables.$ns}custom-banner';
         width: 800px;
         max-width: 100%;
         margin-top: 32px;
-        padding: 0 16px;
+        padding: 0 48px 0 16px;
         background: #160d1b;
         border-radius: 16px;
+        position: relative;
 
         @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
             width: inherit;
@@ -72,7 +73,7 @@ $block: '.#{variables.$ns}custom-banner';
 
     &__commands {
         max-width: 100%;
-        padding: 16px 0;
+        padding: 16px 16px 16px 0;
         overflow-x: auto;
         white-space: nowrap;
     }
@@ -104,4 +105,11 @@ $block: '.#{variables.$ns}custom-banner';
             margin: 8px 0;
         }
     }
+
+    &__copy-button {
+        position: absolute;
+        cursor: pointer;
+        right: 16px;
+        top: 16px;
+    }
 }
diff --git a/src/blocks/CustomBanner/CustomBanner.tsx b/src/blocks/CustomBanner/CustomBanner.tsx
@@ -6,7 +6,7 @@ import {
     YFMWrapper,
     useTheme,
 } from '@gravity-ui/page-constructor';
-import {Button, ButtonProps, Icon} from '@gravity-ui/uikit';
+import {Button, ButtonProps, ClipboardIcon, CopyToClipboard, Icon} from '@gravity-ui/uikit';
 import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
 import React from 'react';
 
@@ -15,6 +15,8 @@ import {CustomBlock} from '../constants';
 
 import './CustomBanner.scss';
 
+const TIMEOUT = 1000;
+
 const b = block('custom-banner');
 
 type CustomButton = ButtonProps & {
@@ -59,6 +61,9 @@ export const CustomBanner: React.FC<CustomBannerProps> = ({
         contentStyle.backgroundPosition = 'center';
     }
 
+    const textCommands = commands?.join(' && ') || '';
+    // const textCommands = '12312';
+
     return (
         <AnimateBlock className={b()} animate={animated}>
             <div className={b('content')} style={contentStyle}>
@@ -74,17 +79,34 @@ export const CustomBanner: React.FC<CustomBannerProps> = ({
                         />
                     )}
                     {commands && commands.length > 0 ? (
-                        <div className={b('commands-wrapper')}>
-                            <div className={b('commands')}>
-                                {commands.map((item, index) => {
-                                    return (
-                                        <div key={index} className={b('command')}>
-                                            {item}
-                                        </div>
-                                    );
-                                })}
+                        <>
+                            <div className={b('commands-wrapper')}>
+                                <div className={b('commands')}>
+                                    {commands.map((item, index) => {
+                                        return (
+                                            <div key={index} className={b('command')}>
+                                                {item}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                                <div className={b('copy-button')}>
+                                    <CopyToClipboard text={textCommands} timeout={TIMEOUT}>
+                                        {(status) => {
+                                            return (
+                                                <div>
+                                                    <ClipboardIcon
+                                                        size={16}
+                                                        status={status}
+                                                        className={b('copy-icon')}
+                                                    />
+                                                </div>
+                                            );
+                                        }}
+                                    </CopyToClipboard>
+                                </div>
                             </div>
-                        </div>
+                        </>
                     ) : null}
                     {buttons && buttons.length > 0 ? (
                         <div className={b('buttons')}>