sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add day markers between articles

Browse source
This commit is contained in:
N-Pex 2024-10-09 15:09:24 +02:00
parent 275b323765
commit 8286c18020
2 changed files with 37 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx
View file

@ -113,7 +113,12 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
).toLocaleDateString()})`}</Typography>
</ChatHeader>
<MessageList ticketId={id}>
{ticketArticles.edges.map(({ node: article }: any) => (
{ticketArticles.edges.map(({ node: article }: any, index: number) => {
const thisDate = new Date(ticketArticles.edges[index].node.updatedAt).toLocaleDateString();
const lastDate = index > 0 ? new Date(ticketArticles.edges[index - 1].node.updatedAt).toLocaleDateString() : ""
return (
<>
{thisDate !== lastDate ? (<Box className="cs-day-marker"><Box className="cs-day-marker__line"></Box><Box className="cs-day-marker__text" sx={{background: veryLightGray}}>{thisDate}</Box></Box>) : (null)}
<Message
key={article.id}
className={
@ -130,7 +135,8 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
article.sender === "Agent" ? "outgoing" : "incoming"
}
/>
))}
</>
)})}
</MessageList>
<Box
sx={{

29
apps/link/app/_styles/global.css
View file

@ -98,3 +98,32 @@ body {
.cs-main-container {
border-right: 1px solid #ccc;
}
.cs-day-marker {
width: 100%;
text-align: center;
height: 30px;
color: #aaa;
font-family: Roboto;
font-size: 14px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.cs-day-marker__line {
position: absolute;
content: " ";
height: 1px;
top: 15px;
left: 10px;
right: 10px;
background-color: #aaa;
}
.cs-day-marker__text {
position: relative;
width: fit-content;
padding: 10px;
}