Add content to the Discussion Panel

front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx

@@ -1,12 +1,100 @@
 import styled from '@emotion/styled';
+import Composer from './composer/Composer';
+import Booking, { BookingEvent } from './events/Booking';
+import Message, { MessageEvent } from './events/Message';
+import Note, { NoteEvent } from './events/Note';
+
+export type Event = BookingEvent | MessageEvent | NoteEvent;
 
 const StyledPanel = styled.div`
   display: flex;
   flex-grow: 1;
+  flex-direction: column;
+`;
+
+const EventsContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding: 32px;
+`;
+
+const StyledToday = styled.div`
+  font-size: 12px;
+  color: #2e3138;
+  border-bottom: 1px solid #eaecee;
+  margin-top: 32px;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+`;
+
+const ComposerContainer = styled.div`
+  display: flex;
+  padding: 32px;
+  flex-direction: column;
+  flex-grow: 1;
 `;
 
 function DiscussionPanel() {
-  return <StyledPanel></StyledPanel>;
+  return (
+    <StyledPanel>
+      <EventsContainer>
+        <Booking
+          booking={{
+            id: 1,
+            time: 'Wed, Sep 10, 2022',
+            user: 'Georges',
+            nights: 4,
+            guests: 5,
+            price: '756.90$',
+            listing: 'Rochefort Montagne',
+            dateRange: 'Mon, Sep 30 - Fri, Oct 2',
+          }}
+        />
+        <StyledToday>Today</StyledToday>
+        <Message
+          message={{
+            id: 1,
+            time: '2 hours ago',
+            user: 'Georges Alain',
+            channel: 'sms',
+            message:
+              'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where to look for.',
+          }}
+        />
+        <Message
+          message={{
+            id: 2,
+            time: 'just now',
+            user: 'Support',
+            channel: 'sms',
+            message: 'Hello I’m here bla bla bla',
+            agent: 'Leslie A',
+          }}
+        />
+        <Note
+          note={{
+            id: 1,
+            time: 'just now',
+            agent: 'LeslieA',
+            message: 'Hello I’m here bla bla bla',
+          }}
+        />
+        <Message
+          message={{
+            id: 3,
+            time: 'just now',
+            user: 'Georges Alain',
+            channel: 'sms',
+            message: 'Thank you !',
+          }}
+        />
+      </EventsContainer>
+      <ComposerContainer>
+        <Composer />
+      </ComposerContainer>
+    </StyledPanel>
+  );
 }
 
 export default DiscussionPanel;