diff --git a/client/index.html b/client/index.html index 2140bac..b85eaba 100644 --- a/client/index.html +++ b/client/index.html @@ -1,5 +1,5 @@ - + diff --git a/client/src/components/AppHeader.tsx b/client/src/components/AppHeader.tsx index 7cf55cb..a3abe15 100644 --- a/client/src/components/AppHeader.tsx +++ b/client/src/components/AppHeader.tsx @@ -32,7 +32,7 @@ const AppHeader = () => { }; return ( -
+
logo diff --git a/client/src/components/NewMessage.tsx b/client/src/components/NewMessage.tsx new file mode 100644 index 0000000..6406ac8 --- /dev/null +++ b/client/src/components/NewMessage.tsx @@ -0,0 +1,33 @@ +import { useMutation, useQuery } from '@tanstack/react-query'; +import { useState } from 'react'; + +const NewMessage = () => { + const [message, setMessage] = useState(''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + setMessage(''); + }; + + return ( +
+
+ setMessage(e.target.value)} + placeholder="Message" + className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light" + /> + +
+
+ ); +}; + +export default NewMessage; diff --git a/client/src/routes/home.tsx b/client/src/routes/home.tsx index 68b30fb..2df3d45 100644 --- a/client/src/routes/home.tsx +++ b/client/src/routes/home.tsx @@ -1,5 +1,6 @@ import AppHeader from '@components/AppHeader'; import Message from '@components/Message'; +import NewMessage from '@components/NewMessage'; const Home = () => { const user = { @@ -9,9 +10,9 @@ const Home = () => { }; return ( -
+
-
+
- +
+
); };