Change terminology. Sketch out Draft Function

src/ui/Function.tsx

@@ -0,0 +1,49 @@
+import { createSignal } from "solid-js";
+import { Digith } from "./Digith";
+import { useProgram } from "./ProgramProvider";
+
+
+export function NewFunctionDraftDigith(props: { draft: Digith.NewFunctionDraft }) {
+  const program = useProgram();
+
+  const [name, setName] = createSignal(props.draft.raw_name);
+  const [params, setParams] = createSignal(props.draft.raw_parameters);
+  const [body, setBody] = createSignal(props.draft.raw_body);
+
+  const handleCommit = () => {
+    // TODO: Add the new function to the draft
+    console.log(`Committing ${name()} to the Program...`);
+  };
+
+  // TODO: What about parsing errors?
+
+  return (
+    <article>
+      <header><strong>Fn Draft</strong></header>
+
+      <div>TODO: New Fn Draft under construction</div>
+    </article>
+  );
+}
+
+// TODO: What about renaming?
+export function FunctionDigith(props: { function: Digith.Function }) {
+  const program = useProgram();
+
+  const [params, setParams] = createSignal(props.function.raw_parameters);
+  const [body, setBody] = createSignal(props.function.raw_body);
+
+  const handleCommit = () => {
+    // TODO: Update the old function with new code
+    console.log(`Committing ${props.function.name} to the Program...`);
+  };
+
+  return (
+    <article>
+      <header><strong>Fn</strong></header>
+
+      <div>TODO: Fn under construction</div>
+    </article>
+  );
+}
+