From f4dc93a842bd38635d92b38f513660e85197cef8 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Wed, 8 Apr 2020 05:39:32 +0800
Subject: [PATCH] docs(playground): show title on copy icon

---
 lib/components/playground/index.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/lib/components/playground/index.tsx b/lib/components/playground/index.tsx
index b0b205a..097478a 100644
--- a/lib/components/playground/index.tsx
+++ b/lib/components/playground/index.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState } from 'react'
+import React, { useState } from 'react'
 import { LivePreview, LiveProvider, LiveEditor, LiveError } from 'react-live'
 import withDefaults from 'components/utils/with-defaults'
 import useClipboard from 'components/utils/use-clipboard'
@@ -31,13 +31,13 @@ const editor = (code: string, copy: Function, isChinese: boolean) => {
   const [visible, setVisible] = useState(false)
   
   const [, setToast] = useToasts()
-  const clickHandler = (event: MouseEvent<HTMLDetailsElement>) => {
+  const clickHandler = (event: React.MouseEvent) => {
     event.stopPropagation()
     event.preventDefault()
     setVisible(!visible)
   }
   
-  const copyHandler = (event: MouseEvent<SVGElement>) => {
+  const copyHandler = (event: React.MouseEvent) => {
     event.stopPropagation()
     event.preventDefault()
     copy(code)
@@ -53,7 +53,11 @@ const editor = (code: string, copy: Function, isChinese: boolean) => {
             <span>{isChinese ? '编辑代码' : 'Code Editor'}</span>
           </div>
           <div>
-            {visible && <CopyIcon onClick={copyHandler} />}
+            {visible && (
+              <span className="copy" onClick={copyHandler} title={isChinese ? '拷贝代码' : 'Copy Code'}>
+                <CopyIcon />
+              </span>
+            )}
           </div>
         </summary>
         <div className="area">
@@ -110,6 +114,11 @@ const editor = (code: string, copy: Function, isChinese: boolean) => {
           border-top: 1px solid ${theme.palette.accents_2};
           padding: ${theme.layout.gapHalf};
         }
+        
+        .copy {
+          display: inline-flex;
+          align-items: center;
+        }
       `}</style>
     </div>
   )