header component added (#3539)

* header component added

* fix css issues and date format issue

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

packages/twenty-front/src/modules/activities/emails/components/ThreadHeader.tsx

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+
+import { IconMail } from '@/ui/display/icon';
+import { Tag } from '@/ui/display/tag/components/Tag';
+import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+interface ThreadHeaderProps {
+  subject: string;
+  lastMessageSentAt: Date;
+}
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(6)};
+  gap: ${({ theme }) => theme.spacing(6)};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  background: ${({ theme }) => theme.background.secondary};
+`;
+
+const StyledHead = styled.div`
+  width: 100%;
+`;
+
+const StyledHeading = styled.h2`
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledContent = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  width: 100%;
+`;
+
+export const ThreadHeader = ({
+  subject,
+  lastMessageSentAt,
+}: ThreadHeaderProps) => {
+  return (
+    <StyledContainer>
+      <Tag Icon={IconMail} color="gray" text="Email" onClick={() => {}} />
+      <StyledHead>
+        <StyledHeading>{subject}</StyledHeading>
+        <StyledContent>
+          Last message {beautifyPastDateRelativeToNow(lastMessageSentAt)}
+        </StyledContent>
+      </StyledHead>
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerThread.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
+import { ThreadHeader } from '@/activities/emails/components/ThreadHeader';
+
 const StyledContainer = styled.div`
   box-sizing: border-box;
   display: flex;
@@ -12,9 +14,16 @@ const StyledContainer = styled.div`
 `;
 
 export const RightDrawerThread = () => {
+  const mockedThread = {
+    subject: 'Tes with long subject, very long subject, very long subject',
+    receivedAt: new Date(),
+  };
   return (
     <StyledContainer>
-      <></>
+      <ThreadHeader
+        subject={mockedThread.subject}
+        lastMessageSentAt={mockedThread.receivedAt}
+      />
     </StyledContainer>
   );
 };