From 7fa328d1f22732705b9122e695eff70330487bf8 Mon Sep 17 00:00:00 2001 From: Guillaume Dorce Date: Sat, 24 Sep 2022 16:27:21 +0200 Subject: [PATCH] add NewMssage and make layout --- client/index.html | 2 +- client/src/components/AppHeader.tsx | 2 +- client/src/components/NewMessage.tsx | 33 ++++++++++++++++++++++++++++ client/src/routes/home.tsx | 12 +++++----- 4 files changed, 40 insertions(+), 9 deletions(-) create mode 100644 client/src/components/NewMessage.tsx 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 ( -
+
-
+
- +
+
); };