From 5391e1f73502ed6574f698d3abbcfdb9157e9b7f Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Mon, 29 Mar 2021 15:10:03 +0200
Subject: [PATCH] developers

---
 packages/website/package.json                 |  1 +
 .../components/CodeTerminal/CodeTerminal.js   | 50 +++++++++++++++++++
 .../src/components/CodeTerminal/index.js      |  1 +
 packages/website/src/pages/developers.js      | 41 ++++++++-------
 packages/website/tailwind.config.js           |  2 +
 5 files changed, 78 insertions(+), 17 deletions(-)
 create mode 100644 packages/website/src/components/CodeTerminal/CodeTerminal.js
 create mode 100644 packages/website/src/components/CodeTerminal/index.js

diff --git a/packages/website/package.json b/packages/website/package.json
index 96742e16..f873170c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -44,6 +44,7 @@
     "react-dropzone": "^11.3.2",
     "react-helmet": "^6.1.0",
     "react-svg-loader": "^3.0.3",
+    "react-syntax-highlighter": "^13.5.3",
     "react-use": "^17.2.1",
     "skynet-js": "^3.0.2",
     "stream-browserify": "^2.0.2",
diff --git a/packages/website/src/components/CodeTerminal/CodeTerminal.js b/packages/website/src/components/CodeTerminal/CodeTerminal.js
new file mode 100644
index 00000000..f010492f
--- /dev/null
+++ b/packages/website/src/components/CodeTerminal/CodeTerminal.js
@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
+import style from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark";
+
+SyntaxHighlighter.registerLanguage("javascript", js);
+
+const CodeTerminal = () => {
+  const codeString = `import { SkynetClient } from "skynet-js";
+
+// create a client
+const client = new SkynetClient();
+
+// Assume we have a file from an input form.
+
+async function example() {
+  try {
+    // upload
+    const { skylink } = await client.uploadFile(file);
+
+    // download
+    await client.downloadFile(skylink);
+
+    console.log('Download successful');
+  } catch (error) {
+    console.log(error)
+  }
+}`;
+
+  return (
+    <div className="desktop:max-w-terminal">
+      <div className="bg-palette-400 rounded-t space-x-2 px-2">
+        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-error"></div>
+        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-warning"></div>
+        <div style={{ height: "11px", width: "11px" }} className="inline-block rounded-full bg-primary"></div>
+      </div>
+      <div className="p-4 bg-palette-500 text-sm" style={{ backgroundColor: "rgb(40, 44, 52)" }}>
+        <SyntaxHighlighter language="javascript" showLineNumbers={true} wrapLongLines={true} style={style}>
+          {codeString}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};
+
+CodeTerminal.propTypes = {};
+
+CodeTerminal.defaultProps = {};
+
+export default CodeTerminal;
diff --git a/packages/website/src/components/CodeTerminal/index.js b/packages/website/src/components/CodeTerminal/index.js
new file mode 100644
index 00000000..e4d92c4b
--- /dev/null
+++ b/packages/website/src/components/CodeTerminal/index.js
@@ -0,0 +1 @@
+export { default } from "./CodeTerminal";
diff --git a/packages/website/src/pages/developers.js b/packages/website/src/pages/developers.js
index 615bcb52..c31ef753 100644
--- a/packages/website/src/pages/developers.js
+++ b/packages/website/src/pages/developers.js
@@ -1,6 +1,7 @@
 import * as React from "react";
 import Layout, { Section, SectionTitle, CardWithDescription } from "../components/Layout";
 import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons";
+import CodeTerminal from "../components/CodeTerminal";
 import SEO from "../components/seo";
 
 const LearnMoreButton = () => (
@@ -73,24 +74,30 @@ const DevelopersPage = () => (
     <SEO title="Developers" />
 
     <Section>
-      <h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
-        Decentralized Apps with speed, confidence, and <span className="text-primary underline">usability</span>
-      </h1>
+      <div className="flex flex-col desktop:flex-row desktop:space-y-0 space-y-12">
+        <div className="space-y-12">
+          <h1 className="font-semibold text-4xl desktop:text-6xl desktop:leading-16 text-white">
+            Decentralized Apps with speed, confidence, and <span className="text-primary underline">usability</span>
+          </h1>
 
-      <ul className="mt-12 space-y-2">
-        {docs.map(({ name, href }, index) => (
-          <li>
-            <a
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary font-light text-lg inline-flex"
-            >
-              {name} <ExternalLink className="fill-current inline-block ml-2" height={28} />
-            </a>
-          </li>
-        ))}
-      </ul>
+          <ul className="space-y-2">
+            {docs.map(({ name, href }, index) => (
+              <li key={index}>
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary font-light text-lg inline-flex"
+                >
+                  {name} <ExternalLink className="fill-current inline-block ml-2" height={28} />
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <CodeTerminal />
+      </div>
     </Section>
 
     <Section className="bg-white">
diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
index a56285e2..bf48b19f 100644
--- a/packages/website/tailwind.config.js
+++ b/packages/website/tailwind.config.js
@@ -3,6 +3,7 @@ const plugin = require("tailwindcss/plugin");
 
 const colors = {
   primary: "#00c65e",
+  warning: "#ffd567",
   error: "#ED5454",
   palette: {
     100: "#f5f7f7",
@@ -42,6 +43,7 @@ module.exports = {
       },
       maxWidth: {
         column: "320px",
+        terminal: "640px",
         tablet: "640px",
         desktop: "1024px",
         content: "992px",