ThreadCommentView.tsx (1195B)
1 import { ThreadComment } from '@/lib/models/thread' 2 import Link from 'next/link' 3 import styles from './ThreadCommentView.module.css' 4 5 export interface ThreadCommentViewProps { 6 index: number 7 comment: ThreadComment 8 } 9 10 function pad (n: number) { 11 return n < 10 ? `0${n}` : n 12 } 13 14 function formatDate (date: Date) { 15 const year = date.getFullYear() 16 const month = date.getMonth() + 1 17 const day = date.getDate() 18 const hours = date.getHours() 19 const minutes = date.getMinutes() 20 const seconds = date.getSeconds() 21 22 return `${year}-${pad(month)}-${pad(day)} ` + 23 `${pad(hours)}:${pad(minutes)}:${pad(seconds)}` 24 } 25 26 export default function ThreadCommentView (props: ThreadCommentViewProps) { 27 return ( 28 <div className={styles['comment']}> 29 <div className={styles['meta']}> 30 <span className={styles['idx']}>{props.index + 1}</span> 31 32 <Link className={styles['author']} href={`/users/${props.comment.authorId}`}> 33 {props.comment.authorName} 34 </Link> 35 36 <span className={styles['date']}>{formatDate(props.comment.createdAt)}</span> 37 </div> 38 39 <div className={styles['body']}> 40 {props.comment.content} 41 </div> 42 </div> 43 ) 44 }