Accept payment

.prettierrc

@@ -6,5 +6,6 @@
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
-}
+  "trailingComma": "all",
+  "useTabs": false
+}

components/AcceptPayments/index.tsx

@@ -17,7 +17,7 @@ export default function AcceptPayments(): JSX.Element {
                 </LzButton>
             </div>
             <div className="lg:max-w-lg xl:max-w-xl xl:w-4/6 bg-pri-50">
-                <CodeBlock id="api" />
+                {/* <CodeBlock id="api" /> */}
             </div>
         </section>
     )

components/CodeBlock/components/RequestHead.tsx

@@ -0,0 +1,30 @@
+import cn from "classnames";
+import { LzCodeSelect, LzToggle } from "components";
+import { RequestData, RequestType } from "../types";
+
+const RequestHead = (props: RequestData) => {
+  const { method = undefined, requestData, showResponse, onChange, toggleResponse } = props;
+  const { name } = requestData as RequestType;
+  const options = {
+    'POST': 'bg-suc-100',
+    'GET': ''
+  }
+  return (
+    <div className='bg-neu-50'>
+      <div className='px-8 py-2.5 flex justify-between'>
+        <div className='flex items-center font-proxima'>
+          {method && <span className={cn('uppercase text-neu-700 caption-s rounded-8 px-2.5 py-1 text-xs h-fit mr-4', options[method])}>{method}</span>}
+          {name.length > 1 && <LzCodeSelect onChange={onChange} items={name} />}
+        </div>
+        <div className='flex items-center'>
+          <span className='text-sm font-semibold leading-5 font-proxima text-neu-600 mr-3.5'>
+            {showResponse ? 'Hide Response' : 'Show Response'}
+          </span>
+          <LzToggle state={showResponse} onChange={toggleResponse} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RequestHead;

components/CodeBlock/components/ResponseHead.tsx

@@ -0,0 +1,27 @@
+import { LzCodeSelect } from "components";
+import { ItemType } from "../types";
+
+export type ResponseProp = {
+  title: string;
+  item: ItemType;
+  onChange: (i: number) => void;
+}
+
+const ResponseHead = (props: ResponseProp) => {
+  const { title, item, onChange } = props;
+  const { name } = item as ItemType;
+  return (
+    <div className='bg-neu-50'>
+      <div className='px-8 py-2.5 flex justify-between border-b border-neu-200'>
+        <div className='flex items-center'>
+          <h4 className='text-sm font-proxima font-semibold text-neu-600'>{title || 'Response'}</h4>
+        </div>
+        <div className='flex items-center'>
+          {item.name.length > 1 ? <LzCodeSelect onChange={onChange} items={name} /> : null}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ResponseHead

components/CodeBlock/components/TabHead.tsx

@@ -0,0 +1,39 @@
+import { useState, MouseEvent } from "react";
+import cn from "classnames";
+
+export type TabProps = {
+  items: string[];
+  onChange: (i: number) => void;
+}
+
+const TabHead = (props: TabProps) => {
+  const { items, onChange } = props;
+  const [active, setActive] = useState<number>(0);
+
+  const tabItemClassName = (i: number): string => {
+    return cn('py-3.5 px-2.5 text-neu-400 relative mr-4', { 'text-pri-600': i === active })
+  }
+
+  const onTabClicked = (e: MouseEvent<HTMLButtonElement>): void => {
+    e.preventDefault();
+    const { dataset } = e.target as HTMLButtonElement;
+    setActive(Number(dataset.value));
+    onChange(Number(dataset.value))
+  }
+  return (
+    <div className='bg-white'>
+      <ul className='flex items-center px-8 font-proxima'>
+        {items.map((title: string, i: number) => (
+          <li key={title} className={tabItemClassName(i)}>
+            <button type='button' aria-label={title} data-value={i} onClick={onTabClicked}>{title}</button>
+            {i === active && (
+              <div className='absolute bottom-0 left-0 w-full h-1 bg-pri-500 rounded-t-2xl'></div>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default TabHead;

components/CodeBlock/components/index.ts

@@ -0,0 +1,3 @@
+export { default as RequestHead } from './RequestHead';
+export { default as ResponseHead } from './ResponseHead';
+export { default as TabHead } from './TabHead';

components/CodeBlock/configurePrism.ts

@@ -0,0 +1,49 @@
+const initializePrism = (Prism) => {
+    Prism.languages.json = {
+        'property': {
+            pattern: /(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,
+            lookbehind: true,
+            greedy: true
+        },
+        'string': {
+            pattern: /(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,
+            lookbehind: true,
+            greedy: true
+        },
+        'comment': {
+            pattern: /\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,
+            greedy: true
+        },
+        'number': /-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,
+        'punctuation': /[{}[\],]/,
+        'operator': /:/,
+        'boolean': /\b(?:false|true)\b/,
+        'null': {
+            pattern: /\bnull\b/,
+            alias: 'keyword'
+        }
+    };
+
+    Prism.languages.curl = {
+        'curl': /\bcurl\b/,
+        'url': /https?:[a-zA-Z0-9:.?=\/\-_{}]*/,
+        'parameter': {
+            pattern: /[A-Za-z0-9\[\]-_]+ *(?=[=])/,
+        },
+        'value': [{
+            pattern: /([=])([A-Za-z0-9-_.]*)/,
+            lookbehind: true,
+        }, {
+            pattern: /(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+        }, {
+            pattern: /(\-u )([A-Za-z0-9-_.{}]*)/,
+            lookbehind: true,
+        }],
+        'punctuation': /[{}['’\],]/,
+        'method': /(?:POST|GET|PATCH)/g,
+        'option': / *--[a-zA-Z-]*\b/,
+    };
+
+    Prism.languages.webmanifest = Prism.languages.json;
+}
+export { initializePrism };

components/CodeBlock/hooks/useStateSnippet.ts

@@ -0,0 +1,42 @@
+import { snippets } from 'data/snippets';
+import { useState, useEffect } from 'react';
+
+import { ItemType, RequestData, RequestType } from '../types';
+
+export type StateSnippetProps = {
+  type: any;
+  item: any;
+}
+
+export type StateSnippetTypes = {
+  language: string;
+  codeSnippet: string;
+  updateSnippet: any;
+}
+
+const useStateSnippet = ({ type, item }: StateSnippetProps): StateSnippetTypes => {
+  const [codeSnippet, setCodeSnippet] = useState<string>("");
+  const [language, setLanguage] = useState<string>("jsx");
+
+  const updateSnippet = (snippet, lang) => {
+    setCodeSnippet(snippet);
+    setLanguage(lang);
+  }
+
+  useEffect(() => {
+    if (type === 'tab') {
+      updateSnippet(snippets[(item as ItemType).snippet[0]], (item as ItemType).lang[0]);
+    }
+    if (type === 'request') {
+      const { requestData } = item as RequestData;
+      updateSnippet(snippets[(requestData as RequestType).snippet[0]], (requestData as RequestType).lang[0])
+    }
+    if (type === 'response') {
+      updateSnippet(snippets[(item as ItemType).snippet[0]], 'json');
+    }
+  }, []);
+
+  return { language, codeSnippet, updateSnippet };
+}
+
+export default useStateSnippet;

components/CodeBlock/index.module.scss

@@ -8,15 +8,31 @@
         position: absolute;
         top: -100px;
     }
-    
+
     /* Track */
     ::-webkit-scrollbar-track {
         background-color: #FFF;
+        position: absolute;
     }
-    
+
     /* Handle */
     ::-webkit-scrollbar-thumb {
-        background: #C2C2C2; 
+        background: #C2C2C2;
         border-radius: 50px;
+        position: absolute;
     }
+}
+
+.select {
+    box-shadow: 0px 0px 1px rgba(12, 26, 75, 0.24), 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
+    visibility: hidden;
+    top: 1.9rem;
+    opacity: 0;
+    transition: all .1s ease-out;
+}
+
+.selectActive {
+    visibility: visible;
+    top: 1.3rem;
+    opacity: 1;
 }

components/CodeBlock/index.tsx

@@ -1,52 +1,84 @@
-import { useEffect } from 'react'
-import Prism from 'prismjs'
+import { useEffect, useState, FC } from 'react'
+import Prism from 'prismjs';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import cn from 'classnames';
 
 import 'prismjs/components/prism-jsx.js'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 import Styles from './index.module.scss';
-import { snippets } from 'data/snippets'
-import classNames from 'classnames'
-
-interface IProps {
-    id?: string;
-    req?: string;
-    lang?: string;
-    children?: React.ReactNode
+import { snippets } from 'data/snippets';
+
+import { RequestHead, ResponseHead, TabHead } from './components';
+import { ItemType, RequestType, RequestData, DataProp } from './types';
+import { initializePrism } from './configurePrism';
+import useStateSnippet from './hooks/useStateSnippet';
+
+initializePrism(Prism);
+
+export interface CodeBlockProps<DataProp> {
+    responseTheme?: 'default' | 'red';
+    responseTitle?: string;
+    data: DataProp;
 }
 
-const Label = ({ label }) => {
-    const options = {
-        'POST': 'bg-suc-100'
+const CodeBlock: FC<CodeBlockProps<DataProp>> = (props) => {
+    const { data, responseTheme, responseTitle } = props;
+    const { type, item } = data as DataProp;
+
+    const { codeSnippet, language, updateSnippet } = useStateSnippet({ type, item });
+    const [copied, setCopied] = useState<boolean>(false);
+    const [showResponse, setShowResponse] = useState<boolean>(true);
+
+    const onCodeSwitch = (i: number, items: ItemType | RequestType): void => {
+        updateSnippet(snippets[(items as ItemType).snippet[i]], (items as ItemType).lang[i]);
     }
 
-    return (
-        <div className={classNames(
-            options[label],
-            'uppercase text-neu-700 caption-s rounded-8 px-2.5 py-1')}>
-            {label}
-        </div>
-    )
-};
+    const onCopy = (): void => {
+        setCopied(true);
+        setTimeout(() => {
+            setCopied(false);
+        }, 2000)
+    }
 
-export default function CodeBlock({ id, lang = 'jsx', req = 'POST' }: IProps) {
-    const codeSnippet = snippets[id] || 'snippet not found';
-    // const title = Object.keys(snippets).find(s => s === id);
+    const responseThemeClassname = (): string => {
+        if (type === 'response') {
+            return responseTheme === 'default' ? 'code--default' : 'code--red';
+        }
+        return 'code';
+    }
+
+    const codeBg = (): string => {
+        return type === 'response' ? 'response' : 'default'
+    }
 
     useEffect(() => {
-        Prism.highlightAll()
-    }, [])
+        if (typeof window !== undefined) {
+            Prism.highlightAll()
+        }
+    }, [codeSnippet])
 
     return (
-        <div className={classNames(Styles.CodeBlock, 'flex font-code pb-2 bg-white flex-col')}>
-            <div className='flex items-center px-10 py-4 space-x-5 bg-neu-50 head rounded-t-8'>
-                <Label label={req} />
+        <div>
+            <div className={cn(Styles.CodeBlock, 'flex font-code overflow-hidden bg-white flex-col')}>
+                {type === 'tab' && <TabHead items={(item as ItemType).name} onChange={(i: number) => onCodeSwitch(i, item as ItemType)} />}
+                {type === 'request' && <RequestHead showResponse={showResponse} toggleResponse={(state: boolean) => setShowResponse(state)} {...item as RequestData} onChange={(i: number) => onCodeSwitch(i, (item as RequestData).requestData)} />}
+                {type === 'response' && <ResponseHead title={responseTitle} item={(item as ItemType)} onChange={(i: number) => onCodeSwitch(i, (item as ItemType))} />}
+                <div className='Code p-0 relative'>
+                    <CopyToClipboard onCopy={onCopy} text={codeSnippet}>
+                        <button
+                            type='button'
+                            className='text-xs text-white py-1 px-2.5 bg-neu-800 rounded-lg absolute right-8 top-4 z-[5] font-proxima'
+                        >{copied ? 'Copied' : 'Copy'}</button>
+                    </CopyToClipboard>
+                    <pre className={cn('!my-0 line-numbers', codeBg())}>
+                        <code className={cn(`language-${language} font-code`, responseThemeClassname(), codeBg())}>{codeSnippet}</code>
+                    </pre>
+                </div>
             </div>
-            <code>
-                <pre className="!my-0 line-numbers">
-                    <code className={classNames(`language-${lang}`)}>{codeSnippet}</code>
-                </pre>
-            </code>
+            {(type === 'request' && showResponse) && <div className='mt-5'><CodeBlock responseTheme={responseTheme} responseTitle={responseTitle} data={{ type: 'response', item: (item as RequestData).responseData }} /></div>}
         </div>
     )
-};
+};
+
+export default CodeBlock;