feat(codes-vertical): Adds codes component (#19)

Co-authored-by: dimitri.anoudis <[email protected]>
surrealdb · Oct 10, 2023 · fa1a5a7 · fa1a5a7
1 parent 1d0fdd2
commit fa1a5a7
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 3 deletions.
diff --git a/docs/CLI tool/import_command.mdx b/docs/CLI tool/import_command.mdx
@@ -5,6 +5,10 @@ sidebar_position: 3
 import TableImportComponent from '../../src/components/TableData/TableImportComponent';
 import { data } from '../../src/components/TableData/Import/TableData';
 
+import CommandHelp from '../../src/components/TableData/Import/commandHelp';
+
 # Import command
 
-<TableImportComponent data={data} />
+<TableImportComponent data={data} />
+
+<CommandHelp />
diff --git a/src/components/TableData/Import/commandData.json b/src/components/TableData/Import/commandData.json
@@ -0,0 +1,31 @@
+{
+  "usageHeading": "Import a SurrealQL script into an existing database",
+  "usage": "surreal import [OPTIONS] <file>",
+  "args": "<file> Path to the sql file to import",
+  "options": [
+    {
+      "option": "-c, --conn <conn>",
+      "description": "Remote database server URL to connect to [default: https://cloud.surrealdb.com]"
+    },
+    {
+      "option": "--db <db>",
+      "description": "The database to import the data into"
+    },
+    {
+      "option": "-h, --help",
+      "description": "Print help information"
+    },
+    {
+      "option": "--ns <ns>",
+      "description": "The namespace to import the data into"
+    },
+    {
+      "option": "-p, --pass <pass>",
+      "description": "Database authentication password to use when connecting [default: root]"
+    },
+    {
+      "option": "-u, --user <user>",
+      "description": "Database authentication username to use when connecting [default: root]"
+    }
+  ]
+}
diff --git a/src/components/TableData/Import/commandHelp.js b/src/components/TableData/Import/commandHelp.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import commandData from './commandData.json';
+
+function CommandHelp() {
+  const {
+    commandLine,
+    usageHeading,
+    usage,
+    args,
+    options,
+  } = commandData;
+
+  return (
+    <codes vertical=''>
+      <div className='codes'>
+        <div>
+          <pre>
+            <code>
+              {usageHeading}
+            </code>
+          </pre>
+          <pre>
+            <h5>USAGE:</h5>
+            <code className='language-txt'>
+              {usage}
+            </code>
+          </pre>
+          <pre>
+            <h5>ARGS:</h5>
+            <code className='language-txt'>
+              {args}
+            </code>
+          </pre>
+        </div>
+        <div className='options'>
+          <h4>OPTIONS:</h4>
+          <div className='option-description-container'>
+            {options.map((option, index) => (
+              <div key={index} className='option-description'>
+                <div className='option-column'>
+                  <span className='option-align'>{option.option}</span>
+                </div>
+                <div className='option-column'>
+                  <span className='option-desc-align'>{option.description}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+      </div>
+    </codes>
+  );
+}
+
+export default CommandHelp;
diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -419,9 +419,10 @@ em {
 .table {
   width: 100%;
   border-collapse: collapse;
-  margin: 20px;
   background-color: $boxes-color;
   border-spacing: 2px;
+  margin-bottom: 20px;
+  padding-right: 20px;
 }
 
 .table-header {
@@ -491,4 +492,57 @@ em {
     font-size: 16px;
     background-color: none;
   }
-}
+}
+
+.codes {
+  color: #aeb8ca;
+  background-color: $boxes-color;
+  padding: 20px;
+  pre {
+    background-color: $boxes-color;
+    padding: 5px;
+  }
+  .language-txt {
+    padding-left: 30px;
+  }
+  .language-shell {
+    white-space: pre;
+    tab-size: 4;
+    .token {
+      &.copy {
+        font-size: 10px;
+        color: $faint-color;
+        margin-bottom: 5px;
+      }
+      &.prompt {
+        font-size: 14px;
+        color: #636a75;
+      }
+      &.command {
+        font-size: 14px;
+        color: $hover-color;
+        margin-left: 10px;
+      }
+    }
+  }
+  .options {
+    margin-top: 30px;
+    .option-description-container {
+      display: flex;
+      flex-wrap: wrap;
+      .option-description {
+        display: flex;
+        width: 100%;
+        margin-bottom: 10px;
+      }
+      .option-column {
+        flex: 1;
+        padding: 5px;
+        text-align: left;
+        font-size: 14px;
+      }
+    }
+  }
+
+}
+