Accept payment

.prettierrc

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

components/AcceptPayments/index.tsx

@@ -1,24 +1,57 @@
-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 LzLink from 'components/UI/link'
+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'],
+      },
+      //   responseData: {
+      //     name: ['201: Created'],
+      //     snippet: ['nodeSDKSampleResponse'],
+      //     lang: ['json'],
+      //   },
+    },
+  }
+  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-4 pt-4 pb-4 md:pt-14 rounded-t-8 lg:rounded-8 lg:w-56'>
+        <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 mb-6'>
+            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
+          //   codeClassName='lg:min-h-[320px]'
+          responseTheme='default'
+          responseTitle='Response JSON'
+          data={codeObject}
+        />
+        {/* <CodeBlock id="api" /> */}
+      </div>
+    </section>
+  )
+}

components/CardList/CardList.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames'
+import LinkCard from 'components/LinkCard'
+
+export type CardListProps = {
+  items: CardListType[]
+  icon: boolean
+}
+
+export type CardListType = {
+  title: string
+  desc: string
+  route: string
+}
+
+const CardList = (props: CardListProps) => {
+  const { items, icon } = props
+  return (
+    <section
+      className={classNames(
+        'grid md:grid-cols-2 items-center lg:flex-row w-full md:space-y-1 w-full md:gap-x-6 z-10',
+      )}
+    >
+      {items.map(({ title, desc, route }) => {
+        return (
+          <LinkCard
+            icon={icon}
+            key={route}
+            title={title}
+            desc={desc}
+            route={route}
+          />
+        )
+      })}
+    </section>
+  )
+}
+
+export default CardList

components/CardList/LibrarySection.tsx

@@ -0,0 +1,17 @@
+import classNames from "classnames"
+import LinkCard from "components/LinkCard"
+import { libraryGetStarted } from './data';
+
+export const GetStarted = () => {
+  return (
+    <section
+      className={classNames(
+        'grid md:grid-cols-2 items-center lg:flex-row w-full lg:space-y-1 w-full md:space-x-6',
+      )}
+    >
+      {libraryGetStarted.map(({ title, desc, route }) => {
+        return <LinkCard icon={true} key={route} title={title} desc={desc} route={route} />
+      })}
+    </section>
+  )
+}

components/CardList/data.ts

@@ -0,0 +1,18 @@
+export interface CardWithImage {
+  title: string
+  desc: string
+  route: string
+}
+
+export const libraryGetStarted: CardWithImage[] = [
+  {
+    title: 'Libraries',
+    desc: 'Find documentation libraries for all Lazerpay products.',
+    route: 'libraries/libraries',
+  },
+  {
+    title: 'Plugins',
+    desc: 'Official and open source softwares for accepting crypto payments.',
+    route: 'libraries/plugin',
+  },
+]

components/CardList/index.ts

@@ -0,0 +1,2 @@
+export { GetStarted as LibraryGetStarted } from './LibrarySection';
+export { default } from './CardList';

components/CodeBlock/components/RequestHead.tsx

@@ -0,0 +1,48 @@
+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: 'bg-pri-500 text-neu-50',
+    PUT: 'bg-sec-700 text-neu-50',
+    PATCH: 'bg-sec-700 text-neu-50',
+    DELETE: 'bg-err-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 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,31 @@
+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} position='left' />
+          ) : 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|PUT)/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: string) => {
+    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;