常用Components｜在消息框中内嵌markdown

import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

interface MessageProps {
  message: {
    content: string
    time: string
  }
}

const Message = ({ message }: MessageProps) => {
  const renderers = {
    a: ({ href, children }: { href?: string; children?: React.ReactNode }) => (
      <a
        href={href}
        target='_blank'
        rel='noopener noreferrer'
        className='text-blue-500 underline underline-offset-2'
      >
        {children}
      </a>
    ),
  }

  return (
    <div className='flex flex-col items-end'>
      <p className='text-xs mt-1 text-gray-400 text-right mr-2'>
        {message.time}
      </p>
      <div className='px-4 py-2 rounded-message max-w-xl bg-blue-500 text-white break-words text-justify overflow-hidden'>
        <ReactMarkdown remarkPlugins={[remarkGfm]} components={renderers}>
          {message.content}
        </ReactMarkdown>
      </div>
    </div>
  )
}

export default Message