From c7db13cc21534199a436ebbc60d8cd4385f2babd Mon Sep 17 00:00:00 2001
From: Augusto <augustoconti10@gmail.com>
Date: Tue, 23 Jun 2020 20:33:48 -0300
Subject: [PATCH] feat(snippet): add custom symbol and toast

---
 components/snippet/snippet.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/snippet/snippet.tsx b/components/snippet/snippet.tsx
index b7dda7b..758a7b5 100644
--- a/components/snippet/snippet.tsx
+++ b/components/snippet/snippet.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useRef } from 'react'
 import useTheme from '../styles/use-theme'
 import withDefaults from '../utils/with-defaults'
-import { SnippetTypes, CopyTypes } from '../utils/prop-types'
+import { SnippetTypes, CopyTypes, NormalTypes } from '../utils/prop-types'
 import { getStyles } from './styles'
 import SnippetIcon from './snippet-icon'
 import useClipboard from '../utils/use-clipboard'
@@ -9,6 +9,9 @@ import useToasts from '../use-toasts'
 
 interface Props {
   text?: string | string[]
+  symbol?: string
+  toastText?: string
+  toastType?: NormalTypes
   filled?: boolean
   width?: string
   copy?: CopyTypes
@@ -18,6 +21,9 @@ interface Props {
 
 const defaultProps = {
   filled: false,
+  symbol: '$',
+  toastText: 'Copied to clipboard!',
+  toastType: 'success',
   width: 'initial',
   copy: 'default' as CopyTypes,
   type: 'default' as SnippetTypes,
@@ -38,6 +44,9 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
   type,
   filled,
   children,
+  symbol,
+  toastText,
+  toastType,
   text,
   width,
   copy: copyType,
@@ -63,7 +72,7 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
     if (!childText || !showCopyIcon) return
     copy(childText)
     if (copyType === 'slient') return
-    setToast({ text: 'Copied to clipboard!', type: 'success' })
+    setToast({ text: toastText, type: toastType })
   }
 
   return (
@@ -101,7 +110,7 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
         }
 
         pre::before {
-          content: '$ ';
+          content: '${symbol} ';
           user-select: none;
         }