Add content to the Discussion Panel

front/src/pages/inbox/discussion-panel/events/Booking.tsx

@@ -1,7 +1,80 @@
 import styled from '@emotion/styled';
 
-function Booking() {
-  return;
+export type BookingEvent = {
+  id: number;
+  user: string;
+  time: string;
+  listing: string;
+  nights: number;
+  guests: number;
+  price: string;
+  dateRange: string;
+};
+
+type OwnProps = {
+  booking: BookingEvent;
+};
+
+const StyledBooking = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledLabel = styled.div`
+  font-size: 12px;
+  color: #2e3138;
+  margin-bottom: 8px;
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  padding: 16px;
+  flex-direction: row;
+  border: 1px solid #000000;
+  border-radius: 12px;
+`;
+
+const StyledPicture = styled.div`
+  background: #2e3138;
+  width: 50px;
+  height: 42px;
+  margin-right: 16px;
+`;
+
+const StyledContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const StyledListing = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+const StyledDetails = styled.div`
+  font-size: 12px;
+  color: #2e3138;
+`;
+
+function Booking({ booking }: OwnProps) {
+  return (
+    <StyledBooking>
+      <StyledLabel>
+        {booking.time} · {booking.user} booked a trip
+      </StyledLabel>
+      <StyledContainer>
+        <StyledPicture />
+        <StyledContent>
+          <StyledListing>{booking.listing}</StyledListing>
+          <StyledDetails>
+            {booking.dateRange} · {booking.nights} nights · {booking.guests}{' '}
+            guests · {booking.price}
+          </StyledDetails>
+        </StyledContent>
+      </StyledContainer>
+    </StyledBooking>
+  );
 }
 
 export default Booking;