Accept payments page Implementaion

components/AcceptPayments/index.tsx

@@ -1,24 +1,49 @@
-import classNames from "classnames";
-import CodeBlock from "components/CodeBlock";
-import LzButton from "components/UI/button";
-import Styles from './index.module.scss';
+import classNames from 'classnames'
+import CodeBlock from 'components/CodeBlock'
+import LzButton from 'components/UI/button'
+import Styles from './index.module.scss'
+import { DataProp, ItemType, RequestData } from 'components/CodeBlock/types'
 
 export default function AcceptPayments(): JSX.Element {
-
-    return (
-        <section className={classNames(Styles.AcceptPayments, "flex flex-col lg:flex-row w-full lg:space-y-0 lg:space-x-6")}>
-            <div className="flex flex-col justify-between px-6 pt-8 pb-4 md:pt-14 rounded-t-8 lg:rounded-8 lg:w-52">
-                <div className="!pr-8 mb-8 lg:mb-0">
-                    <h3 className="heading-6-s whitespace-nowrap">To get started</h3>
-                    <p className="mt-5 paragraph-1">Authenticate all Lazerpay API calls using your secret keys.</p>
-                </div>
-                <LzButton className="w-full mt-24 paragraph-1 md:mt-0" size="md" rightIcon={'chevron'}>
-                    Let's go
-                </LzButton>
-            </div>
-            <div className="lg:max-w-lg xl:max-w-xl xl:w-4/6 bg-pri-50">
-                <CodeBlock id="api" />
-            </div>
-        </section>
-    )
-}
+  const codeObject: { type: any; item: RequestData } = {
+    type: 'request',
+    item: {
+      requestData: {
+        name: ['cURL'],
+        snippet: ['getStartedAcceptPaymentPostCURL'],
+        lang: ['curl'],
+      },
+    },
+  }
+  return (
+    <section
+      className={classNames(
+        Styles.AcceptPayments,
+        'flex flex-col lg:flex-row w-full lg:space-y-0 lg:space-x-6',
+      )}
+    >
+      <div className='flex flex-col justify-between px-6 pt-8 pb-4 md:pt-14 rounded-t-8 lg:rounded-8 lg:w-52'>
+        <div className='!pr-8 mb-8 lg:mb-0'>
+          <h3 className='heading-6-s whitespace-nowrap'>To get started</h3>
+          <p className='mt-5 paragraph-1'>
+            Authenticate all Lazerpay API calls using your secret keys.
+          </p>
+        </div>
+        <LzButton
+          className='w-full mt-24 paragraph-1 md:mt-0'
+          size='md'
+          rightIcon={'chevron'}
+        >
+          Let's go
+        </LzButton>
+      </div>
+      <div className='lg:max-w-lg xl:max-w-xl xl:w-4/6'>
+        <CodeBlock
+          responseTheme='default'
+          responseTitle='Response JSON'
+          data={codeObject}
+        />
+      </div>
+    </section>
+  )
+}

components/CodeBlock/components/RequestHead.tsx

@@ -0,0 +1,47 @@
+import cn from 'classnames'
+import LzToggle from 'components/UI/toggle'
+import LzCodeSelect from 'components/UI/codeSelect'
+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: 'bg-pri-500 text-neu-50',
+    PUT: 'bg-sec-700 text-neu-50',
+  }
+  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 caption-s rounded-8 px-2.5 py-1 paragraph-1-s h-fit mr-4',
+                options[method],
+              )}
+            >
+              {method}
+            </span>
+          )}
+          {name.length > 1 && <LzCodeSelect onChange={onChange} items={name} />}
+        </div>
+        <div className='flex items-center'>
+          <span className='leading-5 paragraph-1-s 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,29 @@
+import { ItemType } from '../types'
+import LzCodeSelect from 'components/UI/codeSelect'
+
+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='paragraph-1-s 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,48 @@
+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 paragraph-1-s relative mr-4', {
+      'text-pri-600 paragraph-1-s': 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 paragraph-1-s'>
+        {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.tsx

@@ -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|PUT)/g,
+        'option': / *--[a-zA-Z-]*\b/,
+    };
+
+    Prism.languages.webmanifest = Prism.languages.json;
+}
+export { initializePrism };

components/CodeBlock/hooks/useStateSnippets.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;
 }