diff --git a/frontend/index.html b/frontend/index.html index e4b78ea..ac309de 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,4 +1,4 @@ - + @@ -6,7 +6,7 @@ Vite + React + TS - +
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 988d907..63bbe54 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,10 +1,11 @@ import "./App.css"; import Layout from "./layout/Layout"; +import MainChat from "./components/MainChat"; function App() { return ( -

Hello World

+ ); } diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 6620e1b..df70eba 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,12 +1,39 @@ import React from "react"; +import { LifeBuoy, RectangleEllipsis } from "lucide-react"; +import Register from "./Register"; +import { useState } from "react"; const Header: React.FC = () => { + const [isRegisterOpen, setIsRegisterOpen] = useState(false); + return ( - <> -
-

Header

-
- +
+
+
+

+ Versario +

+
+ + + {isRegisterOpen && } +
); }; diff --git a/frontend/src/components/MainChat.tsx b/frontend/src/components/MainChat.tsx new file mode 100644 index 0000000..b7ae7ca --- /dev/null +++ b/frontend/src/components/MainChat.tsx @@ -0,0 +1,79 @@ +import React from "react"; + +const sampleMessages = [ + { id: 1, role: "assistant", text: "Hello! How can I help you today?" }, + { + id: 2, + role: "user", + text: "Give me a summary of Tailwind's new features.", + }, + { + id: 3, + role: "assistant", + text: "Tailwind 4 introduces a revamped config, faster engine, and cleaner layer imports.", + }, + { id: 4, role: "user", text: "Great, thanks!" }, +]; + +const MainChat: React.FC = () => { + return ( +
+
+

+
+ + +
+

+
+
+
+ {sampleMessages.map((msg) => { + const isUser = msg.role === "user"; + return ( +
+
+ {msg.text} +
+
+ ); + })} +
+
+
{ + e.preventDefault(); + }} + className="group relative mx-auto flex max-w-3xl items-end gap-2" + > +