From f9c8d5c6f8987e3c04df8d1dc7180dc3d44172af Mon Sep 17 00:00:00 2001
From: Martin Berg Alstad <600878@stud.hvl.no>
Date: Thu, 9 Feb 2023 20:57:13 +0100
Subject: [PATCH] Moved keywords to it's own component

---
 src/truth-table.tsx | 54 ++++++++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/truth-table.tsx b/src/truth-table.tsx
index 7247e45..f3b3504 100644
--- a/src/truth-table.tsx
+++ b/src/truth-table.tsx
@@ -174,29 +174,9 @@ simplify=${ simplifyEnabled() }&hide=${ hideValues().value }&sort=${ sortValues(
                             <p>API docs can be found <Link to={ "https://api.martials.no/simplify-truths" }>here</Link>.
                             </p>
                         </MyDisclosure>
-                        <MyDisclosure title={ "Keywords" }>
-                            <table>
-                                <tbody>
-                                    <tr>
-                                        <td>Not:</td>
-                                        <td>!</td>
-                                    </tr>
-                                    <tr>
-                                        <td>And:</td>
-                                        <td>&</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Or:</td>
-                                        <td>|</td>
-                                        <td>/</td>
-                                    </tr>
-                                    <tr>
-                                        <td class={ "pr-2" }>Implication:</td>
-                                        <td>{ "->" }</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </MyDisclosure>
+
+                        <KeywordsDisclosure />
+
                     </MyDisclosureContainer>
 
                     <form class={ "flex-row-center" } onSubmit={ onClick } autocomplete={ "off" }>
@@ -417,4 +397,32 @@ const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => {
     )
 }
 
+const KeywordsDisclosure = () => {
+    return (
+        <MyDisclosure title={ "Keywords" }>
+            <table>
+                <tbody>
+                    <tr>
+                        <td>Not:</td>
+                        <td>!</td>
+                    </tr>
+                    <tr>
+                        <td>And:</td>
+                        <td>&</td>
+                    </tr>
+                    <tr>
+                        <td>Or:</td>
+                        <td>|</td>
+                        <td>/</td>
+                    </tr>
+                    <tr>
+                        <td class={ "pr-2" }>Implication:</td>
+                        <td>{ "->" }</td>
+                    </tr>
+                </tbody>
+            </table>
+        </MyDisclosure>
+    );
+};
+
 render(() => <TruthTablePage />, document.getElementById("root") as HTMLElement);