Add real time messaging

src/components/MessageBar/MessageBar.tsx

@@ -1,13 +1,31 @@
 import type { Component } from "solid-js";
+import { IMessageBarProps } from "./types";
+
+const MessageBar: Component<IMessageBarProps> = (props: IMessageBarProps) => {
+    const handleEnter = (e: KeyboardEvent) => {
+        if (e.key === "Enter") {
+            props.onSend?.();
+        }
+    };
 
-const MessageBar: Component = () => {
     return (
         <div class="absolute w-full bottom-0 p-4 z-10">
             <div class="bg-stone-800/25 backdrop-blur-lg h-16 shadow-bar p-2 flex flex-row gap-2 rounded-full">
                 <label class="bg-stone-800/50 backdrop-blur-lg input w-full h-full rounded-full focus:border-none outline-none">
-                    <input type="text" placeholder="Send a message..." />
+                    <input
+                        type="text"
+                        placeholder="Send a message..."
+                        value={props.text}
+                        onInput={(e) =>
+                            props.onChangeText?.(e.currentTarget.value)
+                        }
+                        onKeyDown={handleEnter}
+                    />
                 </label>
-                <button class="bg-stone-950/50 backdrop-blur-lg btn btn-neutral h-full rounded-full">
+                <button
+                    class="bg-stone-950/50 backdrop-blur-lg btn btn-neutral h-full rounded-full"
+                    onClick={props.onSend}
+                >
                     Send
                 </button>
             </div>

src/components/MessageBar/index.ts

@@ -1 +1,2 @@
 export * from "./MessageBar";
+export * from "./types";

src/components/MessageBar/types.ts

@@ -0,0 +1,7 @@
+interface IMessageBarProps {
+    text: string;
+    onChangeText?: (text: string) => void;
+    onSend?: () => void;
+}
+
+export { type IMessageBarProps };