code boxes

Author: Alban Bailly

src/components/2_molecules/code-box.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const CodeBox = ({ line1, line2, line3, line4, line5 }) => (
+  <div className="code-box bg-ThemeBeige rounded md:my-8 mx-auto">
+    <div className="code-box-header border-white flex justify-start py-4 px-6">
+      <span className="code-box-circle circle-red" />
+      <span className="code-box-circle circle-yellow" />
+      <span className="code-box-circle circle-green" />
+    </div>
+    <div className="code-box-content py-4 px-6">
+      <pre>{line1}</pre>
+      <pre>{line2}</pre>
+      <pre>{line3}</pre>
+      <pre>{line4}</pre>
+      <pre>{line5}</pre>
+    </div>
+  </div>
+);
+
+export default CodeBox;

src/pages/index.js

@@ -3,6 +3,7 @@ import { graphql } from "gatsby";
 
 import Layout from "../components/4_layouts/layout";
 import SEO from "../components/0_utlilities/seo";
+import CodeBox from "../components/2_molecules/code-box";
 
 const IndexPage = ({ data }) => {
   const { edges } = data.allMarkdownRemark;
@@ -17,6 +18,10 @@ const IndexPage = ({ data }) => {
           <div className="text-2xl my-3 text-center font-light">
             All of the functionality of the Manager from the command line.
           </div>
+          <CodeBox
+            line1="pip install linode-cli"
+            line2="linode-cli linodes create"
+          />
           {/* {{ partial "2_molecules/code-box.html" ( dict "Line1" "pip install linode-cli" "Line2" "linode-cli linodes create") }} */}
           <div className="mt-6 text-center">
             <a

src/pages/kubernetes.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Layout from "../components/4_layouts/layout";
 import SEO from "../components/0_utlilities/seo";
+import CodeBox from "../components/2_molecules/code-box";
 
 const KubernetesPage = () => {
   return (
@@ -12,7 +13,12 @@ const KubernetesPage = () => {
             <h2 className="font-normal text-BaseGreenDark text-center">
               Create a Kubernetes Cluster with One Command
             </h2>
-            <div className="flex justify-center mt-4">code box</div>
+            <div className="flex justify-center mt-4">
+              <CodeBox
+                line1="pip install linode-cli"
+                line2="linode-cli k8s-alpha create mycluster"
+              />
+            </div>
             <div className="flex justify-center mb-10 mt-8 md:mt-0">
               <a
                 className="btn"

src/pages/libraries-tools.js

@@ -4,6 +4,7 @@ import Layout from "../components/4_layouts/layout";
 import SEO from "../components/0_utlilities/seo";
 import Libraries from "../components/2_molecules/libraries";
 import Tools from "../components/2_molecules/tools";
+import CodeBox from "../components/2_molecules/code-box";
 
 const LibToolsPage = () => {
   return (
@@ -21,6 +22,10 @@ const LibToolsPage = () => {
             <div className="flex mx-auto md:-mx-4 items-center md:justify-center flex-col-reverse md:flex-row mb-2 max-w-xs md:max-w-full">
               <div className="px-4 flex flex-wrap">
                 <div style={{ width: 300 }}>
+                  <CodeBox
+                    line1="pip install linode-cli"
+                    line2="linode-cli linodes create"
+                  />
                   {/* {{ partial "2_molecules/code-box.html" ( dict "Line1" "pip install linode-cli" "Line2" "linode-cli linodes create") }} */}
                 </div>
                 <div className="mt-4 md:hidden flex w-full justify-center">