Routing for operators, Styling for main page

client-tauri/src/components/NavBar.tsx

@@ -1,16 +1,13 @@
-import { Container } from "react-bootstrap";
 import StirlingLogo from "../assets/favicon.svg";
 import NavBarStyles from "./NavBar.module.css";
 
 function NavBar() {
     return (
         <nav>
-            <Container>
-                <a className={NavBarStyles.navbar_brand} href="/">
-                    <img className={NavBarStyles.main_icon} src={StirlingLogo} alt="icon"/>
-                    <span className={NavBarStyles.icon_text}>Stirling PDF</span>
-                </a>
-            </Container>
+            <a className={NavBarStyles.navbar_brand} href="/">
+                <img className={NavBarStyles.main_icon} src={StirlingLogo} alt="icon"/>
+                <span className={NavBarStyles.icon_text}>Stirling PDF</span>
+            </a>
         </nav>
     );
 }

client-tauri/src/components/OperatorCard.module.css

@@ -0,0 +1,22 @@
+.operator_card {
+    border: 1px solid var(--md-sys-color-surface-5);
+    border-radius: 1.75rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background: var(--md-sys-color-surface-5);
+    transition: transform 0.3s, border 0.3s;
+    transform-origin: center center;
+    outline: 0px solid transparent;
+}
+
+.operator_card h3 {
+    margin-top: 0;
+}
+
+.operator_card:hover {
+    cursor: pointer;
+    transform: scale(1.08);
+    box-shadow: var(--md-sys-elevation-2);
+}

client-tauri/src/components/OperatorCard.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+import { getSchemaByName } from "@stirling-pdf/shared-operations/src/workflow/operatorAccessor";
+
+import styles from './OperatorCard.module.css';
+interface OperatorCardProps {
+    /** The text to display inside the button */
+    operatorInternalName: string;
+}
+
+export function OperatorCard({ operatorInternalName }: OperatorCardProps) {
+    const [schema, setSchema] = useState<any>(undefined); // TODO: Type as joi type
+
+    useEffect(() => {
+        getSchemaByName(operatorInternalName).then(schema => {
+            if(schema) {
+                setSchema(schema.schema);
+            }
+        });
+    }, [operatorInternalName]);
+
+    return (
+        <a key={operatorInternalName} href={"/operators/" + operatorInternalName}>
+            <div>
+
+            </div>
+            <div className={styles.operator_card}>
+                <h3>{ schema?.describe().flags.label }</h3>
+                { schema?.describe().flags.description }
+            </div>
+        </a>
+    );
+}

client-tauri/src/components/fields/BuildFields.tsx

@@ -10,22 +10,15 @@ interface BuildFieldsProps {
 
 export function BuildFields({ schemaDescription, onSubmit }: BuildFieldsProps) {
     console.log("Render Build Fields", schemaDescription);
-    const label = (schemaDescription?.flags as any)?.label
-    const description = (schemaDescription?.flags as any)?.description;
     const values = (schemaDescription?.keys as any)?.values.keys as { [key: string]: Joi.Description};
     return (
-        <div>
-            <h3>{label}</h3>
-            {description}
-            <hr />
-            <form onSubmit={(e) => { onSubmit(e); e.preventDefault(); }}>
-            {
-                values ? Object.keys(values).map((key) => {  
-                    return (<GenericField key={key} fieldName={key} joiDefinition={values[key]} />) 
-                }) : undefined
-            }
-                <input type="submit" value="Submit" />
-            </form>
-        </div>
+        <form onSubmit={(e) => { onSubmit(e); e.preventDefault(); }}>
+        {
+            values ? Object.keys(values).map((key) => {  
+                return (<GenericField key={key} fieldName={key} joiDefinition={values[key]} />) 
+            }) : undefined
+        }
+            <input type="submit" value="Submit" />
+        </form>
     );
 }