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;