Add ConditionalExplorer

packages/liphe/components/Explorer/Conditional.module.css

@@ -0,0 +1,26 @@
+.conditional {
+  display: inline-block;
+  border-left: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+  border-radius: 10%;
+  padding: 16px 8px;
+  vertical-align: top;
+}
+
+.condition {
+}
+
+.consequent,
+.alternative {
+  padding: 10px;
+  margin: 10px;
+}
+
+.consequent {
+  display: inline-block;
+  border: 1px solid #00aa00;
+}
+.alternative {
+  display: inline-block;
+  border: 1px solid #aa0000;
+}

packages/liphe/components/Explorer/Conditional.tsx

@@ -0,0 +1,28 @@
+import * as Delisp from "@delisp/core";
+import { Typed } from "@delisp/core";
+import * as React from "react";
+import { ExpressionExplorer } from "./Expression";
+import styles from "./Conditional.module.css";
+
+export const ConditionalExplorer: React.FC<{
+  conditional: Delisp.SConditional<Typed>;
+}> = ({ conditional }) => {
+  return (
+    <div className={styles.conditional}>
+      <div className={styles.condition}>
+        if <ExpressionExplorer expression={conditional.node.condition} />
+      </div>
+      <div className={styles.branches}>
+        <fieldset className={styles.consequent}>
+          <legend>then</legend>
+          <ExpressionExplorer expression={conditional.node.consequent} />
+        </fieldset>
+        <fieldset className={styles.alternative}>
+          <legend>else</legend>
+
+          <ExpressionExplorer expression={conditional.node.alternative} />
+        </fieldset>
+      </div>
+    </div>
+  );
+};

packages/liphe/components/Explorer/Expression.tsx

@@ -12,6 +12,7 @@ import { NumberExplorer } from "./Number";
 import { RecordExplorer } from "./Record";
 import { StringExplorer } from "./String";
 import { VariableReferenceExplorer } from "./VariableReference";
+import { ConditionalExplorer } from "./Conditional";
 
 export const ExpressionExplorer: React.FC<{
   expression: Delisp.Expression<Typed>;
@@ -47,6 +48,12 @@ export const ExpressionExplorer: React.FC<{
           variable={{ ...expression, node: expression.node }}
         />
       );
+    case "conditional":
+      return (
+        <ConditionalExplorer
+          conditional={{ ...expression, node: expression.node }}
+        />
+      );
 
     default: {
       const normalizer = useTypeNormalizer();