added chat input

app/(main)/(routes)/servers/[serverId]/channels/[channelId]/page.tsx

@@ -3,6 +3,7 @@ import { redirectToSignIn } from "@clerk/nextjs";
 import { db } from "@/lib/db";
 import { redirect } from "next/navigation";
 import { ChatHeader } from "@/components/chat/chat-header";
+import { ChatInput } from "@/components/chat/chat-input";
 
 interface ChannelIdPageProps {
     params: {
@@ -41,6 +42,11 @@ const ChannelIdPage = async ({
     return (
         <div className="bg-white dark:bg-[#313338] flex flex-col h-full">
             <ChatHeader name={channel.name} serverId={channel.serverId} type={"channel"}/>
+            <div className="flex-1">Future Messages</div>
+            <ChatInput name={channel.name} type="channel" apiUrl="/api/socket/messages" query={{
+                channelId: channel.id,
+                serverId: channel.serverId,            
+            }}/>
         </div>
     )
 }

components/chat/chat-input.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import axios from "axios";
+import qs from "query-string";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Plus, Smile } from "lucide-react";
+
+interface ChatInputProps {
+    apiUrl: string;
+    query: Record<string, any>;
+    name: string;
+    type: "conversation" | "channel";
+}
+
+const formSchema = z.object({
+    content: z.string().min(1),
+});
+
+export const ChatInput = ({
+    apiUrl,
+    query,
+    name,
+    type
+}: ChatInputProps) => {
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            content: "",
+        }
+    });
+
+    const isLoading = form.formState.isSubmitting;
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        try{
+            const url = qs.stringifyUrl({
+                url: apiUrl,
+                query,
+            });
+
+            await axios.post(url, values);
+        }catch(error){
+            console.log(error);
+        }
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+                <FormField 
+                    control={form.control}
+                    name="content"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormControl>
+                                <div className="relative p-4 pb-6">
+                                    <button
+                                        type="button"
+                                        onClick={() => {}}
+                                        className="absolute top-7 left-8 h-[24px] w-[24px] bg-zinc-500 dark:bg-zinc-400 hover:bg-zinc-600 dark:hover:bg-zinc-300 transition rounded-full p-1 flex items-center justify-center"
+                                    >
+                                        <Plus className="text-white dark:text-[#313338]"/>                                        
+                                    </button>
+                                    <Input
+                                        disabled={isLoading}
+                                        className="px-14 py-6 bg-zinc-200/90 dark:bg-zinc-700/75 border-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-zinc-600 dark:text-zinc-200"
+                                        placeholder={`Message ${type === "conversation" ? name : "#" + name}`}
+                                        {...field}
+                                    />
+                                    <div className="absolute top-7 right-8">
+                                        <Smile/>
+                                    </div>
+                                </div>
+                            </FormControl>
+                        </FormItem>                        
+                    )}
+                />
+            </form>
+        </Form>
+    )
+}