2 files changed, 26 insertions, 0 deletions
diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index 4b1ab46..405a968 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -4,6 +4,7 @@ import { ApiContext } from '../../utils/api_context';
 import { AuthContext } from '../../utils/auth_context';
 import { RolesContext } from '../../utils/roles_context';
 import { Button } from '../common/button';
+import { Ping } from './ping';
 
 export const Home = () => {
   const [, setAuthToken] = useContext(AuthContext);
@@ -42,6 +43,9 @@ export const Home = () => {
           Admin
         </Button>
       )}
+      <section>
+        <Ping />
+      </section>
     </div>
   );
 };
diff --git a/client/components/home/ping.jsx b/client/components/home/ping.jsx
new file mode 100644
index 0000000..dd891af
--- /dev/null
+++ b/client/components/home/ping.jsx
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import { Button } from '../common/button';
+
+export const Ping = () => {
+  const [pings, setPings] = useState([]);
+  const [key, setKey] = useState('defaultkey');
+  return (
+    <>
+      <header>Ping</header>
+      <section>
+        <input
+          type="text"
+          className="border-2 border-gray-700 p-2 rounded"
+          value={key}
+          onChange={(e) => setKey(e.target.value)}
+        />
+        <Button>Ping Connect</Button>
+        <Button>Send Ping</Button>
+      </section>
+    </>
+  );
+};