chat

packages/nextjs/globals.css

@@ -64,6 +64,10 @@
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
+
+  .input-box {
+    box-shadow: 0px 0px 10px 5px rgba(61, 185, 207, 0.50) inset, 0px 4px 15px 0px rgba(0, 0, 0, 0.50);
+  }
 }
 
 @layer base {

packages/nextjs/pages/chat/index.tsx

@@ -1,3 +1,24 @@
+import { useState } from "react";
+
 export default function Home() {
-    return <></>
-}
+  const [message, setMessage] = useState("");
+
+  return (
+    <>
+      <div className="w-full flex flex-col h-[760px] justify-end gap-3">
+        <div className="px-48">
+            Deneme
+        </div>
+        <div className="w-full flex focus:outline-none gap-6 justify-center items-center">
+          <input
+            className="flex gap-5 rounded-xl w-3/4 h-16 bg-white input-box px-4 text-[20px]"
+            onChange={(e) => setMessage(e.currentTarget.value)}
+          ></input>
+          <button className="w-[150px] h-[70px] bg-[#3DB9CF] rounded-xl">
+            Send
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}