diff --git a/frontend/components/CommentBox.tsx b/frontend/components/CommentBox.tsx index db0e8aa..654a2b3 100644 --- a/frontend/components/CommentBox.tsx +++ b/frontend/components/CommentBox.tsx @@ -30,7 +30,8 @@ import type { Comment } from '../types'; export interface CommentBoxProps { comment: Comment; - username?: string; + username?: string; // TODO: Pass username into CommentBox and make it required + showThreadLine: boolean; } function formatDate(dateString: string): string { @@ -62,7 +63,7 @@ function formatDate(dateString: string): string { const DEFAULT_MAX_LENGTH = 200; -export function CommentBox({ comment, username }: CommentBoxProps) { +export function CommentBox({ comment, username, showThreadLine }: CommentBoxProps) { const theme = useTheme(); const [isExpanded, setIsExpanded] = useState(false); const [isLiked, setIsLiked] = useState(false); @@ -94,13 +95,15 @@ export function CommentBox({ comment, username }: CommentBoxProps) { size={32} backgroundColor={isAnonymous ? theme.colors.orange100 : theme.colors.gray300} /> - + {showThreadLine && ( + + )} {/* Comment content */} diff --git a/frontend/components/CommentsPanel.tsx b/frontend/components/CommentsPanel.tsx new file mode 100644 index 0000000..14de499 --- /dev/null +++ b/frontend/components/CommentsPanel.tsx @@ -0,0 +1,27 @@ +'use client'; + +import React from 'react'; + +import { Pane } from 'evergreen-ui'; + +import { CommentBox } from './CommentBox'; + +import type { Comment } from '../api/commentService'; + +type CommentsPanelProps = { + comments: Comment[]; +}; + +const CommentsPanel: React.FC = ({ comments }) => { + return ( + + {comments.map((comment, idx) => ( + + + + ))} + + ); +}; + +export default CommentsPanel;