docs: add copy code button

huozhi · Feb 12, 2024 · f923e11 · f923e11
1 parent e4bcba6
commit f923e11
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 4 deletions.
diff --git a/docs/app/components/copy-button.js b/docs/app/components/copy-button.js
@@ -0,0 +1,12 @@
+export function CopyButton({ codeSnippet, ...props }) {
+  return (
+    <button
+      {...props}
+      onClick={() => {
+        navigator.clipboard.writeText(codeSnippet)
+      }}
+    >
+      Copy Code
+    </button>
+  )
+}
diff --git a/docs/app/components/install-banner.css b/docs/app/components/install-banner.css
@@ -5,7 +5,7 @@
   width: 100vw;
   min-height: 200px;
   background-color: #2b2b2b;
-  color: #fff;
+  color: #ccc;
   margin: 0;
   padding: 32px 0 16px 0;
 }
@@ -25,6 +25,7 @@
 }
 
 .install-banner__code {
+  position: relative;
   background-color: #383838;
   font-size: 1rem;
   padding: 8px 16px;
@@ -33,6 +34,24 @@
   border-radius: 2px;
 }
 
+/* copy code button */
+.install-banner__code button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: #383838;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 2px;
+  font-size: 0.75rem;
+}
+
+.install-banner__code--dimmed {
+  color: #afafaf;  
+}
+
 @media screen and (max-width: 600px) {  
   .install-banner__code {
     font-size: 0.75rem;

diff --git a/docs/app/components/install-banner.js b/docs/app/components/install-banner.js
@@ -1,5 +1,29 @@
+'use client'
+
+import { CopyButton } from './copy-button'
 import './install-banner.css'
 
+const cssCode = `\
+/* styles.css */
+:root {
+  --sh-class: #2d5e9d;
+  --sh-identifier: #354150;
+  --sh-sign: #8996a3;
+  --sh-property: #0550ae;
+  --sh-entity: #249a97;
+  --sh-jsxliterals: #6266d1;
+  --sh-string: #00a99a;
+  --sh-keyword: #f47067;
+  --sh-comment: #a19595;
+}
+`
+
+const usageCode = `\
+import { highlight } from 'sugar-high'
+
+const html = highlight(code)
+`
+
 export default function InstallBanner() {
   return (
     <div className="install-banner">
@@ -12,8 +36,16 @@ export default function InstallBanner() {
       <div className="max-width-container">
         <div className="install-banner__code">
           <code>
-            <pre>{`import { highlight } from 'sugar-high'` + '\n\n' + `const html = highlight(code)`}</pre>
+            <pre>{usageCode}</pre>
+          </code>
+          <CopyButton codeSnippet={usageCode} />
+        </div>
+        <br />
+        <div className="install-banner__code install-banner__code--dimmed">
+          <code>
+            <pre>{cssCode}</pre>
           </code>
+          <CopyButton codeSnippet={cssCode} />
         </div>
       </div>
     </div>

diff --git a/docs/app/styles.css b/docs/app/styles.css
@@ -112,7 +112,7 @@ textarea {
   position: relative;
   display: flex;
   background-color: #f6f6f6;
-  padding: 16px 22px;
+  padding: 16px 22px 0;
 }
 .code-control {
   display: flex;
@@ -223,7 +223,8 @@ pre code .sh__line::before {
 
 .codice-editor code,
 .codice-editor textarea {
-  padding: 24px 12px 24px 48px;
+  padding: 24px;
+  padding-left: 48px;
 }
 
 .live-editor__color {