41 lines
1001 B
TypeScript
41 lines
1001 B
TypeScript
import dayjs from 'dayjs'
|
|
|
|
export interface MessageProps {
|
|
text: string
|
|
timestamp: number
|
|
user: string
|
|
walletPk: string
|
|
}
|
|
|
|
const Messages = ({ messages }: { messages: MessageProps[] }) => {
|
|
return (
|
|
<div className="space-y-4">
|
|
{messages
|
|
.sort((a, b) => a.timestamp - b.timestamp)
|
|
.map((m) => (
|
|
<Message message={m} key={m.walletPk + m.timestamp} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Messages
|
|
|
|
const Message = ({ message }: { message: MessageProps }) => {
|
|
const { text, timestamp, user } = message
|
|
return (
|
|
<div className="flex items-start pl-1">
|
|
<div className="h-6 w-6 rounded-full bg-th-bkg-4" />
|
|
<div className="ml-2">
|
|
<p className="mb-0 text-xxs capitalize leading-none text-th-fgd-3">
|
|
{user}{' '}
|
|
<span className="text-th-fgd-4">
|
|
{dayjs(timestamp).format('h:mma')}
|
|
</span>
|
|
</p>
|
|
<p className="mb-0 text-th-fgd-2">{text}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|