diff --git a/src/app/components/Clients.module.css b/src/app/components/Clients.module.css new file mode 100644 index 0000000..ca8031e --- /dev/null +++ b/src/app/components/Clients.module.css @@ -0,0 +1,82 @@ +.container { + border-radius: 10px; + margin-top: 1rem; + width: 100%; + display: flex; + flex-direction: column; + border: 1px solid #848586; +} + +.topBar { + padding: 1rem 1rem 0 1rem; +} + +.clients { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 1rem; + padding: 1rem; +} + +.clientContainer { + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + font-size: 0.8rem; +} + +.official { + color: #ee7203; + font-weight: bold; +} + +.community { + color: #64adac; + font-weight: bold; +} + +.install { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1rem; + background-color: #0b3766; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} + +.actions { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.copyButton, +.copyButtonCopied { + background-color: #194488; + border: none; + color: white; + border-radius: 5px; + cursor: pointer; +} + +.copyButtonCopied { + color: #64adac; +} + +.copyButton:hover { + color: #ee7203; +} + +.actions>a, +.actions>button { + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/src/app/components/Clients.tsx b/src/app/components/Clients.tsx new file mode 100644 index 0000000..45c3037 --- /dev/null +++ b/src/app/components/Clients.tsx @@ -0,0 +1,174 @@ +'use client'; +import { useState } from 'react'; +import styles from './Clients.module.css'; + +export default function Clients({ + version, +}: { + version: string; +}) { + const csharpSvg = ` + + + + + + + + `; + + const versionClients = { + 1: [ + { + name: 'C#', + repoLink: + 'https://github.com/onspring-technologies/onspring-api-sdk/tree/v1.1', + installCommand: + 'dotnet add package Onspring.API.SDK --version 2.1.0', + svg: csharpSvg, + official: true, + }, + ], + 2: [ + { + name: 'C#', + repoLink: + 'https://github.com/onspring-technologies/onspring-api-sdk', + installCommand: + 'dotnet add package Onspring.API.SDK', + svg: csharpSvg, + official: true, + }, + { + name: 'Javascript', + repoLink: + 'https://github.com/StevanFreeborn/onspring-api-sdk-javascript', + installCommand: 'npm install onspring-api-sdk', + svg: ` + + + + + `, + official: false, + }, + { + name: 'Python', + repoLink: + 'https://github.com/StevanFreeborn/onspring-api-sdk-python', + installCommand: 'pip install OnspringApiSdk', + svg: ` + + + + + `, + official: false, + }, + ], + } as { + [key: string]: { + name: string; + repoLink: string; + installCommand: string; + svg: string; + official: boolean; + }[]; + }; + + const clients = versionClients[version]; + const [selectedClient, setSelectedClient] = useState( + clients[0] + ); + const [copied, setCopied] = useState(false); + + const handleCopyButtonClick = () => { + navigator.clipboard.writeText( + selectedClient.installCommand + ); + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 500); + }; + + return ( +
+
Client SDKs
+
+ {clients.map(client => ( +
setSelectedClient(client)} + key={client.name} + className={styles.client} + > +
+
+
+ {client.name} +
+ + {client.official ? ( +
+ Official +
+ ) : ( +
+ Community +
+ )} +
+
+ ))} +
+
+
+ {selectedClient.installCommand} +
+
+ + + + + + +
+
+
+ ); +} diff --git a/src/app/components/CodeSnippet.module.css b/src/app/components/CodeSnippet.module.css index 4b6b06d..ff5c5c4 100644 --- a/src/app/components/CodeSnippet.module.css +++ b/src/app/components/CodeSnippet.module.css @@ -13,7 +13,7 @@ padding: 0.5rem 1rem; border-top-right-radius: 10px; border-top-left-radius: 10px; - font-size: 1rem; + font-size: 0.8rem; color: white; } diff --git a/src/app/lib/markdoc.ts b/src/app/lib/markdoc.ts index 3ff8291..87b2cbb 100644 --- a/src/app/lib/markdoc.ts +++ b/src/app/lib/markdoc.ts @@ -2,6 +2,7 @@ import { default as Markdoc } from '@markdoc/markdoc'; import fs from 'fs'; import path from 'path'; import React, { ReactNode } from 'react'; +import Clients from '../components/Clients'; import CodeSnippet from '../components/CodeSnippet'; import Fence from '../components/Fence'; import { Doc, DocSection } from './../types/types'; @@ -66,6 +67,14 @@ const markDocConfig = { }, }, }, + clients: { + render: 'Clients', + attributes: { + version: { + type: 'string', + }, + }, + }, }, }; @@ -80,6 +89,7 @@ function parseMarkdown(sourcePath: string): ReactNode { components: { CodeSnippet: CodeSnippet, Fence: Fence, + Clients: Clients, }, }); diff --git a/src/docs/version_001/introduction/example.md b/src/docs/version_001/introduction/example.md index b40a855..877ef12 100644 --- a/src/docs/version_001/introduction/example.md +++ b/src/docs/version_001/introduction/example.md @@ -9,3 +9,6 @@ https://api.onspring.com/v1 ``` {% /code %} + +{% clients version="1" %} +{% /clients %} diff --git a/src/docs/version_002/introduction/example.md b/src/docs/version_002/introduction/example.md index d69d841..2589a16 100644 --- a/src/docs/version_002/introduction/example.md +++ b/src/docs/version_002/introduction/example.md @@ -17,3 +17,6 @@ X-Api-Version: 2 ``` {% /code %} + +{% clients version="2" %} +{% /clients %}