Implementing QuestionPanel

[mar-crespo]

References

• Linear: DEV-548

Proposed Changes

• Created .module.css file for styling
• Added QuestionPanelProps that takes in user, title, tags, details, create_time, user_is_anonymous, and a function for the back button called onBack
• Added helper functions to format the time passed since creation and to format metadata displayed
• Implemented QuestionPanel and created a test page with the following code:

'use client';


import { Pane, majorScale } from 'evergreen-ui';


import QuestionPanel from '@/components/QuestionPanel/QuestionPanel';


export function TestPage() {
 // Mock data for testing QuestionPanel
 const mockQuestion = {
   user: 'Sarah Park',
   title: 'How do I approach the graph algorithms in COS226?',
   tags: ['Algorithms', 'COS226', 'Graphs'],
   details:
     "I'm starting the graph algorithms unit in COS226, and I'm feeling overwhelmed. What's the best way to actually learn these algorithms instead of just memorizing them? Should I focus on proofs, run times, code implementation, or visual intuition?",
   create_time: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
   user_is_anonymous: false,
 };


 return (
   <Pane padding={majorScale(4)} background='tint1' minHeight='100vh'>
     <QuestionPanel
       user={mockQuestion.user}
       title={mockQuestion.title}
       tags={mockQuestion.tags}
       details={mockQuestion.details}
       create_time={mockQuestion.create_time}
       user_is_anonymous={mockQuestion.user_is_anonymous}
       onBack={() => alert('Back button clicked!')}
     />
   </Pane>
 );
}


export default TestPage;

Results of the test page:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
help	Ready	Preview, Comment	Feb 17, 2026 6:25pm

[issacli-0821]

Looks great!

[issacli-0821]

Can we change this component to use Evergeen elements instead?