chore(website): call Toast when clipboard successes

salute-developers · Jun 11, 2024 · bbd5a66 · bbd5a66
1 parent 7e424c9
commit bbd5a66
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/website/plasma-website/components/roster/IconClipboard.tsx b/website/plasma-website/components/roster/IconClipboard.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { IconCopyOutline } from '@salutejs/plasma-icons';
+import { useToast } from '@salutejs/plasma-b2c';
+import type { ShowToastArgs } from '@salutejs/plasma-b2c';
 
 const StyledClipboardIcon = styled(IconCopyOutline)`
     margin-left: -1.375rem;
@@ -45,13 +47,31 @@ const StyledSource = styled.div`
     display: inline-flex;
 `;
 
+const toastData: ShowToastArgs = {
+    text: '',
+    position: 'bottom',
+    role: 'status',
+    size: 'm',
+    view: 'dark',
+    timeout: 250,
+};
+
 export const IconClipboard = ({ source, title }: { source: string; title: string }) => {
+    const { showToast } = useToast();
+
     const copyToClipboard = async () => {
         try {
             await navigator.clipboard.writeText(source);
+
+            showToast({
+                ...toastData,
+                text: 'Скопировано',
+            });
         } catch (err) {
-            // eslint-disable-next-line no-console
-            console.warn('Ошибка при копировании текста');
+            showToast({
+                ...toastData,
+                text: 'Ошибка при копировании текста',
+            });
         }
     };
 

diff --git a/website/plasma-website/pages/icons.tsx b/website/plasma-website/pages/icons.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
+import { ToastProvider } from '@salutejs/plasma-b2c';
 import Head from 'next/head';
 
 import { Header, Main, SearchForm, IconsList, Footer } from '../components/roster';
@@ -17,7 +18,7 @@ export default function Home() {
     );
 
     return (
-        <>
+        <ToastProvider>
             <Head>
                 <title>Plasma Icons</title>
             </Head>
@@ -27,6 +28,6 @@ export default function Home() {
                 <IconsList searchQuery={searchQuery} />
                 <Footer />
             </StyledMain>
-        </>
+        </ToastProvider>
     );
 }