polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add NewMssage and make layout

This commit is contained in:
Guillaume Dorce 2022-09-24 16:27:21 +02:00
parent c42cbf6b76
commit 7fa328d1f2
4 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr" class="h-full"> <html lang="fr" class="h-full scroll-smooth">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

2
client/src/components/AppHeader.tsx
View File

@ -32,7 +32,7 @@ const AppHeader = () => {
}; };
return ( return (
<header className="sticky top-0 z-100"> <header className="sticky top-0 z-100 w-full shadow-sm shadow-slate-900">
<div className="min-h-80 flex items-center justify-between bg-grey-dark p-2"> <div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
<div className="app-header__logo"> <div className="app-header__logo">
<img src={logo} alt="logo" className="h-14" /> <img src={logo} alt="logo" className="h-14" />

33
client/src/components/NewMessage.tsx Normal file
View File

@ -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 (
<footer className="new-message bg-grey-dark rounded-xl w-full max-w-3xl p-3 gap-5 shadow-md shadow-grey-dark -mt-2">
<form onSubmit={handleSubmit} className="flex gap-2">
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Message"
className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
/>
<button
type="submit"
className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
>
Envoyer
</button>
</form>
</footer>
);
};
export default NewMessage;

12
client/src/routes/home.tsx
View File

@ -1,5 +1,6 @@
import AppHeader from '@components/AppHeader'; import AppHeader from '@components/AppHeader';
import Message from '@components/Message'; import Message from '@components/Message';
import NewMessage from '@components/NewMessage';
const Home = () => { const Home = () => {
const user = { const user = {
@ -9,9 +10,9 @@ const Home = () => {
}; };
return ( return (
<div className="min-h-full bg-grey"> <div className="min-h-full max-h-full bg-grey flex flex-col items-center">
<AppHeader /> <AppHeader />
<main className="flex flex-col items-center p-4 gap-4"> <main className="messages-wrapper flex flex-col-reverse p-4 gap-4 overflow-scroll">
<Message <Message
user={user} user={user}
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget
@ -29,12 +30,9 @@ const Home = () => {
date="14 août 2022 19:00" date="14 août 2022 19:00"
image="https://picsum.photos/800/600" image="https://picsum.photos/800/600"
/> />
<Message <Message user={user} date="14 août 2022 19:00" image="https://picsum.photos/1200/800" />
user={user}
date="14 août 2022 19:00"
image="https://picsum.photos/1200/800"
/>
</main> </main>
<NewMessage />
</div> </div>
); );
}; };