feat(site): simplest documentation: command list

Author: CREAsTIVE

stack-control-site/src/App.css

@@ -8,6 +8,10 @@
   align-items: stretch;
 }
 
+.app h1 {
+  align-self: center;
+}
+
 .block {
   display: flex;
   flex-direction: column;
@@ -46,4 +50,16 @@
   display: flex;
   flex-direction: row-reverse;
   gap: 1em;
+}
+
+
+.docs {
+  display: flex;
+  flex-direction: column;
+  margin: 0 30px;
+  gap: 15px;
+}
+
+.docs .element {
+  
 }

stack-control-site/src/App.tsx

@@ -6,6 +6,8 @@ import { CodeInputField } from "./Components/CodeInputField/CodeInputField";
 import { Button } from "./Components/Button/Button";
 import { StackView } from "./Components/StackView/StackView";
 import { CheckBox } from "./Components/CheckBox/CheckBox";
+import documentationData from "@@/documentation.json"
+import { CommandDescription } from "./Components/CommandDescription/CommandDescription";
 
 let scope: sc.JSScope = sc.make_scope()
 
@@ -73,6 +75,14 @@ const App = () => {
         </div>
       </div>
     </div>
+    <h1>Commands:</h1>
+    <div className={styles.docs}>
+      {documentationData.map(e => 
+        <div className={styles.element}>
+          <CommandDescription commandInfo={e}/>
+        </div>
+      )}
+    </div>
   </div>
 }
 

stack-control-site/src/Components/CommandDescription/CommandDescription.css

@@ -0,0 +1,52 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--secondary);
+  padding: 15px 20px;
+  border-radius: 15px;
+  gap: 10px;
+  align-items: stretch;
+}
+
+.container .hr {
+  background-color: var(--text);
+  height: 2px;
+  border-radius: 2px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+
+.key {
+  margin-block: 0;
+  margin: 0;
+  padding: 2px;
+  background-color: var(--accent);
+  width: 30px;
+  height: 30px;
+  font-size: 25px;
+  border-radius: 1000000px;
+  text-align: center;
+  align-items: center;
+  vertical-align: bottom;
+  display: inline-block;
+  line-height: 30px;
+}
+
+.aliases::before + .aliases::after {
+  content: ",";
+}
+
+.aliases {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.alias {
+  display: flex;
+  opacity: 0.8;
+}

stack-control-site/src/Components/CommandDescription/CommandDescription.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import styles from "./CommandDescription.css"
+
+export type CommandInfo = {
+  key: string,
+  aliases: string[],
+  description: string
+}
+
+export function CommandDescription(props: {commandInfo: CommandInfo}) {
+  return <div className={styles.container}>
+    <div className={styles.header}>
+      <div className={styles.key}>{props.commandInfo.key}</div>
+      <div className={styles.aliases}>
+        {props.commandInfo.aliases.map(e => (
+          <div className={styles.alias}>
+            {e}  
+          </div>
+        ))}
+      </div>
+    </div>
+    <div className={styles.hr}/>
+    <div>
+      <div>
+        {props.commandInfo.description}
+      </div>
+    </div>
+  </div>
+}