From 13bf3b422baf09ef07d5c1509a77c4a7f9d05794 Mon Sep 17 00:00:00 2001
From: adambelouad <132090786+adambelouad@users.noreply.github.com>
Date: Wed, 11 Feb 2026 20:18:39 -0500
Subject: [PATCH 1/4] fixed error removed files

---
 frontend/app/questions/ask/page.tsx |   7 +
 frontend/app/questions/page.tsx     |   5 +-
 frontend/components/AskQuestion.tsx | 240 +++++++++++++++++-----------
 3 files changed, 158 insertions(+), 94 deletions(-)
 create mode 100644 frontend/app/questions/ask/page.tsx

diff --git a/frontend/app/questions/ask/page.tsx b/frontend/app/questions/ask/page.tsx
new file mode 100644
index 0000000..e54788d
--- /dev/null
+++ b/frontend/app/questions/ask/page.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import AskQuestion from '@/components/AskQuestion';
+
+export default function AskQuestionPage() {
+	return <AskQuestion />;
+}
diff --git a/frontend/app/questions/page.tsx b/frontend/app/questions/page.tsx
index 49164e3..bf50f5a 100644
--- a/frontend/app/questions/page.tsx
+++ b/frontend/app/questions/page.tsx
@@ -3,8 +3,11 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import AddIcon from '@mui/icons-material/Add';
 import { Button, Heading, Pane, Text, TrendingUpIcon, majorScale } from 'evergreen-ui';
+import { useRouter } from 'next/navigation';
 
 export function QAPage() {
+	const router = useRouter();
+
 	/**
 	 * Handles the recent button click
 	 */
@@ -23,7 +26,7 @@ export function QAPage() {
 	 * Handles the ask question button click
 	 */
 	const askQuestionHandler = () => {
-		// Placeholder for button click action
+		router.push('/questions/ask');
 	};
 
 	return (
diff --git a/frontend/components/AskQuestion.tsx b/frontend/components/AskQuestion.tsx
index 5e727e0..3bd5814 100644
--- a/frontend/components/AskQuestion.tsx
+++ b/frontend/components/AskQuestion.tsx
@@ -2,7 +2,8 @@
 
 import React, { useState } from 'react';
 
-import { Pane, Textarea, Button, majorScale, minorScale } from 'evergreen-ui';
+import { ArrowLeftIcon, Button, Heading, Pane, Text, Textarea, majorScale } from 'evergreen-ui';
+import { useRouter } from 'next/navigation';
 
 interface FormState {
 	questionTitle: string;
@@ -19,9 +20,9 @@ const initialFormState: FormState = {
 };
 
 export default function AskQuestion(): React.ReactElement {
+	const router = useRouter();
 	const [form, setForm] = useState<FormState>(initialFormState);
 	const [submitted, setSubmitted] = useState(false);
-	const [canceled, setCanceled] = useState(false);
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
 		const { name, value } = e.target as HTMLInputElement;
@@ -38,106 +39,159 @@ export default function AskQuestion(): React.ReactElement {
 	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
 		setSubmitted(true);
-		setCanceled(false);
 		setForm(initialFormState);
 	};
 
 	const handleCancel = () => {
 		setForm(initialFormState);
-		setSubmitted(false);
-		setCanceled(true);
+		router.push('/questions');
+	};
+
+	const handleBack = () => {
+		router.push('/questions');
 	};
 
 	return (
-		<Pane padding={majorScale(2)} marginTop={minorScale(2)} marginBottom={minorScale(2)}>
-			<h2 className='text-3xl font-bold mb-2 text-left'>Ask a Question</h2>
-			<h3 className='text-base font-normal mb-12 text-left'>
-				Get help from the Princeton academics community
-			</h3>
-			<form className='flex flex-col gap-6' onSubmit={handleSubmit}>
-				<div style={{ marginBottom: minorScale(2) }}>
-					<label style={{ display: 'block' }}>Question Title</label>
-					<input
-						name='questionTitle'
-						value={form.questionTitle}
-						onChange={handleChange}
-						required
-						style={{ width: '100%', padding: 8 }}
-						placeholder='E.g., How do I approach the graph algorithms in COS 226?'
-						className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
-					/>
-				</div>
-
-				<div style={{ marginBottom: minorScale(2) }}>
-					<label style={{ display: 'block' }}>Category</label>
-					<select
-						name='category'
-						value={form.category}
-						onChange={handleCategoryChange}
-						required
-						style={{ width: '100%', padding: 8 }}
-						className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
-					>
-						<option value='' disabled>
-							Select a category
-						</option>
-						<option value='Assignments and PSETs'>Assignments and PSETs</option>
-						<option value='Exam Prep'>Exam Prep</option>
-						<option value='Resource Recommendations'>Resource Recommendations</option>
-						<option value='Other'>Other</option>
-					</select>
-				</div>
-
-				<div style={{ marginBottom: minorScale(2) }}>
-					<label style={{ display: 'block' }}>Course (Optional)</label>
-					<input
-						name='course'
-						value={form.course}
-						onChange={handleChange}
-						style={{ width: '100%', padding: 8 }}
-						placeholder='E.g., COS 226'
-						className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
-					/>
-				</div>
-
-				<div style={{ marginBottom: minorScale(2) }}>
-					<label style={{ display: 'block' }}>Details</label>
-					<Textarea
-						name='questionDetails'
-						value={form.questionDetails}
-						onChange={handleChange}
-						style={{ borderRadius: 8, fontSize: '16px' }}
-						required
-						rows={10}
-						width='100%'
-						placeholder='Provide more details about your question...'
-						className='w-full p-2 rounded-md border border-gray-300 bg-gray-100'
-					/>
-					<span className='text-base font-normal mt-1'>
-						Tip: Add specific details and context to get better answers
-					</span>
-				</div>
-
-				<div
-					style={{
-						display: 'flex',
-						gap: 12,
-						width: '100%',
-					}}
+		<Pane
+			display='flex'
+			flexDirection='column'
+			alignItems='center'
+			paddingTop={majorScale(4)}
+			paddingBottom={majorScale(6)}
+			paddingX={majorScale(2)}
+		>
+			{/* Back button */}
+			<Pane width='100%' maxWidth='720px' marginBottom={majorScale(2)}>
+				<Button
+					appearance='minimal'
+					iconBefore={ArrowLeftIcon}
+					onClick={handleBack}
+					paddingLeft={0}
+					fontWeight={500}
 				>
-					<Button appearance='primary' type='submit' size='large' style={{ flex: 8 }}>
-						Post Question
-					</Button>
-					<Button onClick={handleCancel} type='button' size='large' style={{ flex: 2 }}>
-						Cancel
-					</Button>
-				</div>
-			</form>
-
-			{submitted && (
-				<Pane marginTop={minorScale(2)}>Thank you for submitting your question!</Pane>
-			)}
-			{canceled && <Pane marginTop={minorScale(2)}>Edit canceled.</Pane>}
+					Back
+				</Button>
+			</Pane>
+
+			{/* Header */}
+			<Pane width='100%' maxWidth='720px' marginBottom={majorScale(3)}>
+				<Heading size={800} fontWeight={700} marginBottom={4}>
+					Ask a Question
+				</Heading>
+				<Text size={400} color='muted'>
+					Get help from the Hoagie academics community
+				</Text>
+			</Pane>
+
+			{/* Form card */}
+			<Pane
+				width='100%'
+				maxWidth='720px'
+				background='white'
+				border='default'
+				borderRadius={8}
+				padding={majorScale(4)}
+			>
+				{submitted ? (
+					<Pane textAlign='center' paddingY={majorScale(4)}>
+						<Heading size={600} marginBottom={majorScale(2)}>
+							Thank you for submitting your question!
+						</Heading>
+						<Button appearance='primary' onClick={handleBack}>
+							Back to Q&A
+						</Button>
+					</Pane>
+				) : (
+					<form className='flex flex-col gap-6' onSubmit={handleSubmit}>
+						{/* Question Title */}
+						<div>
+							<label className='block text-sm font-semibold mb-1'>
+								Question Title
+							</label>
+							<input
+								name='questionTitle'
+								value={form.questionTitle}
+								onChange={handleChange}
+								required
+								placeholder='e.g. How do I approach the graph algorithms in COS 226?'
+								className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
+							/>
+						</div>
+
+						{/* Category */}
+						<div>
+							<label className='block text-sm font-semibold mb-1'>Category</label>
+							<select
+								name='category'
+								value={form.category}
+								onChange={handleCategoryChange}
+								required
+								className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
+							>
+								<option value='' disabled>
+									Select a category
+								</option>
+								<option value='Assignments and PSETs'>Assignments and PSETs</option>
+								<option value='Exam Prep'>Exam Prep</option>
+								<option value='Resource Recommendations'>
+									Resource Recommendations
+								</option>
+								<option value='Other'>Other</option>
+							</select>
+						</div>
+
+						{/* Course */}
+						<div>
+							<label className='block text-sm font-semibold mb-1'>
+								Course (Optional)
+							</label>
+							<input
+								name='course'
+								value={form.course}
+								onChange={handleChange}
+								placeholder='e.g. COS 226'
+								className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
+							/>
+						</div>
+
+						{/* Details */}
+						<div>
+							<label className='block text-sm font-semibold mb-1'>Details</label>
+							<Textarea
+								name='questionDetails'
+								value={form.questionDetails}
+								onChange={handleChange}
+								required
+								rows={6}
+								width='100%'
+								placeholder='Provide more details about your question...'
+								className='w-full rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent'
+								style={{ borderRadius: 6, fontSize: '14px', resize: 'vertical' }}
+							/>
+							<Text size={300} color='muted' marginTop={4} display='block'>
+								Tip: Add specific details and context to get better answers
+							</Text>
+						</div>
+
+						{/* Buttons */}
+						<div className='flex gap-3 mt-2'>
+							<button
+								type='submit'
+								className='flex-1 rounded-md bg-red-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-red-600 transition-colors'
+							>
+								Post Question
+							</button>
+							<button
+								type='button'
+								onClick={handleCancel}
+								className='rounded-md border border-gray-300 bg-white px-6 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors'
+							>
+								Cancel
+							</button>
+						</div>
+					</form>
+				)}
+			</Pane>
 		</Pane>
 	);
 }

From 3fabd874b34398486677a15e045926e4269ff795 Mon Sep 17 00:00:00 2001
From: adambelouad <132090786+adambelouad@users.noreply.github.com>
Date: Wed, 11 Feb 2026 20:51:32 -0500
Subject: [PATCH 2/4] created dummy study guides home page

---
 frontend/app/study-groups/page.tsx            |  63 +-----
 frontend/components/StudyGroupsContent.tsx    |  67 ++++++
 .../StudyGroupDisplayCard.tsx                 | 124 ++++++++++
 .../StudyGroupsDashboard.tsx                  | 211 ++++++++++++++++++
 .../components/StudyGroupsDashboard/index.ts  |   6 +
 5 files changed, 413 insertions(+), 58 deletions(-)
 create mode 100644 frontend/components/StudyGroupsContent.tsx
 create mode 100644 frontend/components/StudyGroupsDashboard/StudyGroupDisplayCard.tsx
 create mode 100644 frontend/components/StudyGroupsDashboard/StudyGroupsDashboard.tsx
 create mode 100644 frontend/components/StudyGroupsDashboard/index.ts

diff --git a/frontend/app/study-groups/page.tsx b/frontend/app/study-groups/page.tsx
index 07b4c14..ad8fb1c 100644
--- a/frontend/app/study-groups/page.tsx
+++ b/frontend/app/study-groups/page.tsx
@@ -12,69 +12,16 @@
 
 'use client';
 
-import type { ChangeEvent } from 'react';
-import { useState } from 'react';
-
-import { Button, Heading, Pane, Text, TextInputField, majorScale } from 'evergreen-ui';
-import Link from 'next/link';
+import { StudyGroupsDashboard } from '@/components/StudyGroupsDashboard';
 
 /**
- * A React component that renders a form for user interaction, allowing users to input their name
- * and select an option from a dropdown menu. It uses Evergreen UI components for styling and
- * integrates with Auth0 for user authentication. The form submission triggers an async action that
- * simulates an API call and provides feedback through toast notifications.
- *
- * @returns {JSX.Element} The form component with user interaction elements.
+ * Study Groups page: find classmates and create study groups.
  */
 export function StudyGroups() {
-	/**
-	 * Handles the input field which can perform queries
-	 */
-	const [inputValue, setInputValue] = useState('');
-	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-		setInputValue(e.target.value);
-	};
-
-	/**
-	 * Handles the button click
-	 */
-	const handleSubmit = () => {
-		// Placeholder for button click action
-	};
-
 	return (
-		<Pane
-			maxWidth={majorScale(50)}
-			marginX='auto'
-			padding={majorScale(2)}
-			marginTop={majorScale(8)}
-		>
-			{/* Main header */}
-			<Heading size={900} marginBottom={24}>
-				Study Groups
-			</Heading>
-
-			{/* Subtitle */}
-			<Text size={500} marginBottom={24}>
-				Find classmates and form study groups
-			</Text>
-
-			<TextInputField placeholder='Type here...' value={inputValue} onChange={handleChange} />
-
-			<Button
-				appearance='primary'
-				onClick={handleSubmit}
-				width='100%'
-				marginBottom={majorScale(2)}
-			>
-				Find Study Groups
-			</Button>
-			<Link href='/study-groups/form'>
-				<Button appearance='primary' marginBottom={majorScale(2)}>
-					Create Study Group
-				</Button>
-			</Link>
-		</Pane>
+		<div className="min-h-screen border-t-4 border-b-4 border-sky-200 bg-white">
+			<StudyGroupsDashboard />
+		</div>
 	);
 }
 
diff --git a/frontend/components/StudyGroupsContent.tsx b/frontend/components/StudyGroupsContent.tsx
new file mode 100644
index 0000000..8c42142
--- /dev/null
+++ b/frontend/components/StudyGroupsContent.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
+
+import {
+	Button,
+	Heading,
+	Pane,
+	Text,
+	TextInputField,
+	majorScale,
+} from 'evergreen-ui';
+import Link from 'next/link';
+
+/**
+ * Content section for the Study Groups page: header, search input, and actions.
+ */
+export function StudyGroupsContent() {
+	const [inputValue, setInputValue] = useState('');
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setInputValue(e.target.value);
+	};
+
+	const handleSubmit = () => {
+		// Placeholder for button click action
+	};
+
+	return (
+		<Pane
+			maxWidth={majorScale(50)}
+			marginX="auto"
+			padding={majorScale(2)}
+			marginTop={majorScale(8)}
+		>
+			{/* Main header */}
+			<Heading size={900} marginBottom={24}>
+				Study Groups
+			</Heading>
+
+			{/* Subtitle */}
+			<Text size={500} marginBottom={24}>
+				Find classmates and form study groups
+			</Text>
+
+			<TextInputField
+				placeholder="Type here..."
+				value={inputValue}
+				onChange={handleChange}
+			/>
+
+			<Button
+				appearance="primary"
+				onClick={handleSubmit}
+				width="100%"
+				marginBottom={majorScale(2)}
+			>
+				Find Study Groups
+			</Button>
+			<Link href="/study-groups/form">
+				<Button appearance="primary" marginBottom={majorScale(2)}>
+					Create Study Group
+				</Button>
+			</Link>
+		</Pane>
+	);
+}
diff --git a/frontend/components/StudyGroupsDashboard/StudyGroupDisplayCard.tsx b/frontend/components/StudyGroupsDashboard/StudyGroupDisplayCard.tsx
new file mode 100644
index 0000000..f2c6ee3
--- /dev/null
+++ b/frontend/components/StudyGroupsDashboard/StudyGroupDisplayCard.tsx
@@ -0,0 +1,124 @@
+/**
+ * Display card for the study groups dashboard: title, category tag, description,
+ * date/time, location, attendee count with avatars, and Join Group button.
+ * Styled with Tailwind CSS.
+ */
+
+import { FaRegCalendar } from 'react-icons/fa';
+import { MdOutlineLocationOn, MdOutlinePeople } from 'react-icons/md';
+
+export interface StudyGroupDisplayAttendee {
+	initials?: string;
+	imageUrl?: string;
+}
+
+export interface StudyGroupDisplayCardProps {
+	title: string;
+	category: string;
+	description: string;
+	dateTime: Date;
+	location: string;
+	attendeeCount: number;
+	capacity: number;
+	attendees: StudyGroupDisplayAttendee[];
+	onJoin: () => void;
+}
+
+function formatDateTime(date: Date): string {
+	return new Intl.DateTimeFormat('en-US', {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit',
+		hour12: true,
+	}).format(date);
+}
+
+const MAX_VISIBLE_AVATARS = 3;
+
+export function StudyGroupDisplayCard({
+	title,
+	category,
+	description,
+	dateTime,
+	location,
+	attendeeCount,
+	capacity,
+	attendees,
+	onJoin,
+}: StudyGroupDisplayCardProps) {
+	const displayDate = formatDateTime(dateTime);
+	const overflowCount = Math.max(0, attendees.length - MAX_VISIBLE_AVATARS);
+	const visibleAttendees = attendees.slice(0, MAX_VISIBLE_AVATARS);
+
+	return (
+		<div className="flex h-full w-full max-w-[360px] flex-col gap-3 rounded-lg bg-white p-5 text-left shadow-[0_4px_12px_rgba(0,0,0,0.08)]">
+			<div className="flex items-start justify-between gap-3">
+				<h2 className="min-w-0 flex-1 text-lg font-bold leading-tight text-gray-900">
+					{title}
+				</h2>
+				<span className="shrink-0 rounded-full bg-[#16A249] px-2.5 py-1 text-xs font-semibold text-white">
+					{category}
+				</span>
+			</div>
+			<p className="line-clamp-2 text-sm leading-snug text-gray-500">
+				{description}
+			</p>
+			<p className="flex items-center gap-2 text-[13px] text-gray-500">
+				<FaRegCalendar className="shrink-0 text-base text-gray-400" aria-hidden />
+				{displayDate}
+			</p>
+			<p className="flex items-center gap-2 text-[13px] text-gray-500">
+				<MdOutlineLocationOn
+					className="shrink-0 text-base text-gray-400"
+					aria-hidden
+				/>
+				{location}
+			</p>
+			<div className="mt-1 flex items-center justify-between gap-3">
+				<span className="flex items-center gap-1.5 text-[13px] text-gray-500">
+					<MdOutlinePeople
+						className="shrink-0 text-base text-gray-400"
+						aria-hidden
+					/>
+					{capacity > 0
+						? `${attendeeCount} / ${capacity} attending`
+						: `${attendeeCount} attending`}
+				</span>
+				<div className="flex items-center [&>*]:-ml-1.5 [&>*:first-child]:ml-0">
+					{visibleAttendees.map((a, i) =>
+						a.imageUrl ? (
+							<div
+								key={i}
+								className="h-7 w-7 shrink-0 rounded-full border-2 border-white bg-gray-200 bg-cover bg-center bg-no-repeat"
+								style={{ backgroundImage: `url(${a.imageUrl})` }}
+								title={a.initials}
+							/>
+						) : (
+							<div
+								key={i}
+								className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 border-white bg-gray-200 text-[10px] font-semibold text-gray-700"
+								title={a.initials}
+							>
+								{a.initials ?? '?'}
+							</div>
+						),
+					)}
+					{overflowCount > 0 && (
+						<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 border-white bg-gray-300 text-[11px] font-semibold text-gray-700">
+							+{overflowCount}
+						</div>
+					)}
+				</div>
+			</div>
+			<button
+				type="button"
+				className="mt-auto w-full rounded-lg bg-[#EF4343] px-4 py-2.5 text-[15px] font-semibold text-white transition-colors hover:bg-[#d63c3c]"
+				onClick={onJoin}
+			>
+				Join Group
+			</button>
+		</div>
+	);
+}
diff --git a/frontend/components/StudyGroupsDashboard/StudyGroupsDashboard.tsx b/frontend/components/StudyGroupsDashboard/StudyGroupsDashboard.tsx
new file mode 100644
index 0000000..433b309
--- /dev/null
+++ b/frontend/components/StudyGroupsDashboard/StudyGroupsDashboard.tsx
@@ -0,0 +1,211 @@
+'use client';
+
+import Link from 'next/link';
+
+import {
+	StudyGroupDisplayCard,
+	type StudyGroupDisplayAttendee,
+} from '@/components/StudyGroupsDashboard/StudyGroupDisplayCard';
+
+export interface StudyGroupDashboardDatum {
+	id: string;
+	title: string;
+	category: string;
+	description: string;
+	dateTime: Date;
+	location: string;
+	attendeeCount: number;
+	capacity: number;
+	attendees: StudyGroupDisplayAttendee[];
+}
+
+const CATEGORIES = [
+	'All Groups',
+	'Science',
+	'Mathematics',
+	'Humanities',
+	'Engineering',
+	'Social Sciences',
+] as const;
+
+const DUMMY_STUDY_GROUPS: StudyGroupDashboardDatum[] = [
+	{
+		id: '1',
+		title: 'COS 226 Study Group',
+		category: 'Algorithms',
+		description:
+			'Deep dive into graph algorithms and data structures. Preparing for upcoming quiz on shortest paths and minimum spanning trees.',
+		dateTime: new Date('2025-03-28T18:00:00'),
+		location: 'Fine Library, Room 304',
+		attendeeCount: 12,
+		capacity: 15,
+		attendees: [
+			{ initials: 'SC' },
+			{ initials: 'JD' },
+			{ initials: 'ES' },
+			{ initials: 'MK' },
+			{ initials: 'AL' },
+		],
+	},
+	{
+		id: '2',
+		title: 'Quantum Physics Problem Set',
+		category: 'Physics',
+		description:
+			'Work through problem set 4 on quantum mechanics. Focus on Schrödinger equation and wave functions.',
+		dateTime: new Date('2025-03-29T14:00:00'),
+		location: 'Lewis Library, Room 120',
+		attendeeCount: 8,
+		capacity: 12,
+		attendees: [{ initials: 'RJ' }, { initials: 'PT' }, { initials: 'KW' }],
+	},
+	{
+		id: '3',
+		title: 'ECO 100 Review Session',
+		category: 'Economics',
+		description:
+			'Review microeconomics concepts for the midterm. Supply and demand, elasticity, and consumer choice.',
+		dateTime: new Date('2025-03-30T16:00:00'),
+		location: 'Robertson Hall, Room 100',
+		attendeeCount: 18,
+		capacity: 20,
+		attendees: [
+			{ initials: 'AB' },
+			{ initials: 'CD' },
+			{ initials: 'EF' },
+			{ initials: 'GH' },
+		],
+	},
+	{
+		id: '4',
+		title: 'MAT 202 Linear Algebra',
+		category: 'Mathematics',
+		description:
+			'Eigenvalues, eigenvectors, and diagonalization. Bring your problem sets.',
+		dateTime: new Date('2025-03-31T17:30:00'),
+		location: 'Fine Hall, Room 214',
+		attendeeCount: 15,
+		capacity: 15,
+		attendees: [{ initials: 'LM' }, { initials: 'NO' }, { initials: 'PQ' }],
+	},
+	{
+		id: '5',
+		title: 'Organic Chemistry Mechanisms',
+		category: 'Chemistry',
+		description:
+			'Review key reaction mechanisms for CHM 303. SN1, SN2, E1, E2 and synthesis strategies.',
+		dateTime: new Date('2025-04-01T19:00:00'),
+		location: 'Frick Chemistry Lab, Room 132',
+		attendeeCount: 6,
+		capacity: 10,
+		attendees: [{ initials: 'RS' }, { initials: 'TU' }],
+	},
+	{
+		id: '6',
+		title: 'Machine Learning Study Group',
+		category: 'Computer Science',
+		description:
+			'Implement and debug assignment 3 (neural networks). PyTorch and backpropagation.',
+		dateTime: new Date('2025-04-02T15:00:00'),
+		location: 'Computer Science Building, Room 105',
+		attendeeCount: 4,
+		capacity: 5,
+		attendees: [{ initials: 'VW' }, { initials: 'XY' }],
+	},
+];
+
+/**
+ * Dashboard layout for study groups: header with Create button, search, date and category filters, and card grid.
+ * Styled with Tailwind CSS. Search and filters are non-functional for the moment.
+ */
+export function StudyGroupsDashboard() {
+	return (
+		<div className="mx-auto max-w-6xl px-6 pt-8 pb-12">
+			{/* Header: title + subtitle on left, Create button on right */}
+			<div className="mb-10 flex flex-wrap items-start justify-between gap-6">
+				<div>
+					<h1 className="mb-2 text-3xl font-bold tracking-tight text-gray-900">
+						Study Groups
+					</h1>
+					<p className="text-base text-gray-500">
+						Collaborate with peers on coursework and exam preparation
+					</p>
+				</div>
+				<Link
+					href="/study-groups/form"
+					className="shrink-0 rounded-lg bg-[#EF4343] px-5 py-2.5 text-base font-semibold text-white transition-colors hover:bg-[#d63c3c]"
+				>
+					Create Study Group
+				</Link>
+			</div>
+
+			{/* Search + Date row */}
+			<div className="mb-6 flex flex-wrap gap-4">
+				<div className="relative min-w-[240px] flex-1">
+					<span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+						<svg
+							className="h-5 w-5"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							aria-hidden
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+					</span>
+					<input
+						type="search"
+						placeholder="Search study groups..."
+						readOnly
+						className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-4 text-gray-900 placeholder-gray-500 focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-400/20"
+					/>
+				</div>
+				<select
+					disabled
+					className="h-10 w-36 rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-700 focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-400/20"
+				>
+					<option value="any">Date</option>
+					<option value="week">This week</option>
+					<option value="month">This month</option>
+				</select>
+			</div>
+
+			{/* Category filter pills (non-functional) */}
+			<div className="mb-8 flex flex-wrap gap-2">
+				{CATEGORIES.map((cat) => (
+					<button
+						key={cat}
+						type="button"
+						disabled
+						className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700"
+					>
+						{cat}
+					</button>
+				))}
+			</div>
+
+			{/* Cards grid */}
+			<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+				{DUMMY_STUDY_GROUPS.map((group) => (
+					<StudyGroupDisplayCard
+						key={group.id}
+						title={group.title}
+						category={group.category}
+						description={group.description}
+						dateTime={group.dateTime}
+						location={group.location}
+						attendeeCount={group.attendeeCount}
+						capacity={group.capacity}
+						attendees={group.attendees}
+						onJoin={() => {}}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/components/StudyGroupsDashboard/index.ts b/frontend/components/StudyGroupsDashboard/index.ts
new file mode 100644
index 0000000..ebed3f4
--- /dev/null
+++ b/frontend/components/StudyGroupsDashboard/index.ts
@@ -0,0 +1,6 @@
+export { StudyGroupsDashboard } from './StudyGroupsDashboard';
+export {
+	StudyGroupDisplayCard,
+	type StudyGroupDisplayAttendee,
+	type StudyGroupDisplayCardProps,
+} from './StudyGroupDisplayCard';

From addde520078f38dbbf770ace5ddcb48b24b68d6c Mon Sep 17 00:00:00 2001
From: adambelouad <132090786+adambelouad@users.noreply.github.com>
Date: Thu, 12 Feb 2026 11:36:19 -0500
Subject: [PATCH 3/4] added sample user question history

---
 frontend/app/layout.tsx                       |   1 +
 frontend/app/my-posts/page.tsx                | 126 +++++
 .../UserPostsDashboard/UserPostsDashboard.tsx | 451 ++++++++++++++++++
 .../components/UserPostsDashboard/index.ts    |  14 +
 4 files changed, 592 insertions(+)
 create mode 100644 frontend/app/my-posts/page.tsx
 create mode 100644 frontend/components/UserPostsDashboard/UserPostsDashboard.tsx
 create mode 100644 frontend/components/UserPostsDashboard/index.ts

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 87f3b10..9564e24 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -51,6 +51,7 @@ async function Content({ children }: ContentProps): Promise<JSX.Element> {
 		{ title: 'About', href: '/about' },
 		{ title: 'Study Groups', href: '/study-groups' },
 		{ title: 'Q&A', href: '/questions' },
+		{ title: 'My Posts', href: '/my-posts' },
 	];
 
 	return (
diff --git a/frontend/app/my-posts/page.tsx b/frontend/app/my-posts/page.tsx
new file mode 100644
index 0000000..fd45188
--- /dev/null
+++ b/frontend/app/my-posts/page.tsx
@@ -0,0 +1,126 @@
+/**
+ * @overview My Posts page — displays all Q&A activity for the current user.
+ *
+ * Copyright © 2021-2025 Hoagie Club and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree or at https://github.com/hoagieclub/help/LICENSE.
+ *
+ * Permission is granted under the MIT License to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the software. This software is provided "as-is", without warranty of any kind.
+ */
+
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import {
+	UserPostsDashboard,
+	type UserPostQuestion,
+	type UserPostAnswer,
+	type UserPostComment,
+	type UserPostsUser,
+} from '@/components/UserPostsDashboard';
+
+/* ------------------------------------------------------------------ */
+/*  Sample data for preview                                            */
+/* ------------------------------------------------------------------ */
+
+const sampleUser: UserPostsUser = {
+	name: 'Alex Chen',
+	email: 'achen@princeton.edu',
+	classYear: 2026,
+};
+
+const sampleQuestions: UserPostQuestion[] = [
+	{
+		id: 1,
+		title: 'Best strategies for COS 226 midterm prep?',
+		details:
+			'I have my midterm coming up in two weeks and I\'m looking for effective study strategies. Has anyone found particular resources or practice problems that helped them the most?',
+		tags: ['exam prep', 'study tips'],
+		course: 'COS 226',
+		hearts: 12,
+		views: 89,
+		createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), // 2h ago
+	},
+	{
+		id: 2,
+		title: 'How to cite sources in ORF 245 final paper?',
+		details:
+			'The professor mentioned APA format but I\'m not sure if that applies to the statistical appendix as well. Any guidance from people who took this last semester?',
+		tags: ['citation'],
+		course: 'ORF 245',
+		hearts: 5,
+		views: 34,
+		createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3d ago
+	},
+	{
+		id: 3,
+		title: 'Should I take COS 340 or MAT 375?',
+		details:
+			'Both cover similar topics but I\'ve heard very different things about workload and teaching style. Would love to hear from anyone who\'s taken either.',
+		tags: ['course selection', 'course advice'],
+		course: null,
+		hearts: 8,
+		views: 112,
+		createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 1w ago
+	},
+];
+
+const sampleAnswers: UserPostAnswer[] = [
+	{
+		id: 1,
+		questionId: 10,
+		questionTitle: 'Tips for getting started with research as a sophomore?',
+		text: 'I started by emailing professors whose work I found interesting after reading a couple of their papers. Most are very receptive to undergrads — just be specific about why their research excites you.',
+		hearts: 7,
+		createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // 1d ago
+	},
+	{
+		id: 2,
+		questionId: 15,
+		questionTitle: 'What\'s the best way to study for orgo?',
+		text: 'Practice problems are everything. I worked through every problem in the Klein textbook and that alone got me through the class. The mechanism drills on Organic Chemistry Tutor (YouTube) are also great.',
+		hearts: 15,
+		createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5d ago
+	},
+];
+
+const sampleComments: UserPostComment[] = [
+	{
+		id: 1,
+		answerId: 20,
+		questionTitle: 'Is it worth doing a certificate in finance as a BSE student?',
+		text: 'Totally agree with this — I did the same and it opened a lot of doors for internship applications.',
+		hearts: 3,
+		createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(), // 4h ago
+	},
+	{
+		id: 2,
+		answerId: 25,
+		questionTitle: 'How to balance extracurriculars and coursework?',
+		text: 'The time-blocking strategy mentioned here really works. I\'d also add that saying no to things is an underrated skill.',
+		hearts: 6,
+		createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2d ago
+	},
+];
+
+/* ------------------------------------------------------------------ */
+/*  Page component                                                     */
+/* ------------------------------------------------------------------ */
+
+export default function MyPostsPage() {
+	const router = useRouter();
+
+	return (
+		<UserPostsDashboard
+			user={sampleUser}
+			questions={sampleQuestions}
+			answers={sampleAnswers}
+			comments={sampleComments}
+			onQuestionClick={(id) => router.push(`/questions/${id}`)}
+			onAnswerClick={(questionId) => router.push(`/questions/${questionId}`)}
+		/>
+	);
+}
diff --git a/frontend/components/UserPostsDashboard/UserPostsDashboard.tsx b/frontend/components/UserPostsDashboard/UserPostsDashboard.tsx
new file mode 100644
index 0000000..f21bdeb
--- /dev/null
+++ b/frontend/components/UserPostsDashboard/UserPostsDashboard.tsx
@@ -0,0 +1,451 @@
+/**
+ * @overview Dashboard component that displays all posts a user has made in the
+ * Q&A sections. Shows a profile header, tab navigation (Questions / Answers /
+ * Comments), and a scrollable feed of post cards.
+ *
+ * Modelled after a Reddit-style profile page but styled to match the Help app
+ * visual identity (teal brand, Inter font, card system from globals.css).
+ *
+ * Copyright © 2021-2025 Hoagie Club and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree or at https://github.com/hoagieclub/help/LICENSE.
+ *
+ * Permission is granted under the MIT License to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the software. This software is provided "as-is", without warranty of any kind.
+ */
+
+'use client';
+
+import React, { useState, useMemo } from 'react';
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                              */
+/* ------------------------------------------------------------------ */
+
+export interface UserPostQuestion {
+	id: number;
+	title: string;
+	details: string;
+	tags: string[];
+	course: string | null;
+	hearts: number;
+	views: number;
+	createdAt: string;
+}
+
+export interface UserPostAnswer {
+	id: number;
+	questionId: number;
+	questionTitle: string;
+	text: string;
+	hearts: number;
+	createdAt: string;
+}
+
+export interface UserPostComment {
+	id: number;
+	answerId: number;
+	questionTitle: string;
+	text: string;
+	hearts: number;
+	createdAt: string;
+}
+
+export interface UserPostsUser {
+	name: string;
+	email?: string;
+	avatarUrl?: string;
+	classYear?: number;
+}
+
+export interface UserPostsDashboardProps {
+	user: UserPostsUser;
+	questions: UserPostQuestion[];
+	answers: UserPostAnswer[];
+	comments: UserPostComment[];
+	onQuestionClick?: (questionId: number) => void;
+	onAnswerClick?: (questionId: number) => void;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                            */
+/* ------------------------------------------------------------------ */
+
+type Tab = 'questions' | 'answers' | 'comments';
+
+const TAB_LABELS: Record<Tab, string> = {
+	questions: 'Questions',
+	answers: 'Answers',
+	comments: 'Comments',
+};
+
+function timeAgo(dateString: string): string {
+	const now = new Date();
+	const date = new Date(dateString);
+	const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+	if (seconds < 60) return 'just now';
+
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m ago`;
+
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h ago`;
+
+	const days = Math.floor(hours / 24);
+	if (days < 30) return `${days}d ago`;
+
+	const months = Math.floor(days / 30);
+	if (months < 12) return `${months}mo ago`;
+
+	const years = Math.floor(months / 12);
+	return `${years}y ago`;
+}
+
+function getInitials(name: string): string {
+	return name
+		.split(' ')
+		.map((part) => part[0])
+		.join('')
+		.toUpperCase()
+		.slice(0, 2);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Inline icons (match Post.tsx pattern)                              */
+/* ------------------------------------------------------------------ */
+
+const HeartIcon = () => (
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		width='16'
+		height='16'
+		viewBox='0 0 24 24'
+		fill='none'
+		stroke='currentColor'
+		strokeWidth='2'
+		strokeLinecap='round'
+		strokeLinejoin='round'
+		className='h-4 w-4'
+	>
+		<path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' />
+	</svg>
+);
+
+const MessageCircleIcon = () => (
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		width='16'
+		height='16'
+		viewBox='0 0 24 24'
+		fill='none'
+		stroke='currentColor'
+		strokeWidth='2'
+		strokeLinecap='round'
+		strokeLinejoin='round'
+		className='h-4 w-4'
+	>
+		<path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' />
+	</svg>
+);
+
+const EyeIcon = () => (
+	<svg
+		xmlns='http://www.w3.org/2000/svg'
+		width='16'
+		height='16'
+		viewBox='0 0 24 24'
+		fill='none'
+		stroke='currentColor'
+		strokeWidth='2'
+		strokeLinecap='round'
+		strokeLinejoin='round'
+		className='h-4 w-4'
+	>
+		<path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z' />
+		<circle cx='12' cy='12' r='3' />
+	</svg>
+);
+
+/* ------------------------------------------------------------------ */
+/*  Sub-components                                                     */
+/* ------------------------------------------------------------------ */
+
+function UserAvatar({ user }: { user: UserPostsUser }) {
+	if (user.avatarUrl) {
+		return (
+			<div
+				className='h-20 w-20 shrink-0 rounded-full border-4 border-white bg-gray-200 bg-cover bg-center shadow-sm'
+				style={{ backgroundImage: `url(${user.avatarUrl})` }}
+			/>
+		);
+	}
+
+	return (
+		<div className='flex h-20 w-20 shrink-0 items-center justify-center rounded-full border-4 border-white bg-[#1EA7AE] text-2xl font-bold text-white shadow-sm'>
+			{getInitials(user.name)}
+		</div>
+	);
+}
+
+function QuestionCard({
+	question,
+	onClick,
+}: {
+	question: UserPostQuestion;
+	onClick?: () => void;
+}) {
+	return (
+		<div
+			className='cursor-pointer rounded-lg border border-border bg-card p-5 transition-shadow hover:shadow-md'
+			onClick={onClick}
+		>
+			<div className='mb-1 flex items-center gap-2 text-xs text-muted-foreground'>
+				<span>Q&A</span>
+				<span>•</span>
+				<span>{timeAgo(question.createdAt)}</span>
+			</div>
+
+			<h3 className='mb-2 text-base font-semibold text-foreground'>{question.title}</h3>
+
+			{question.details && (
+				<p className='mb-3 line-clamp-2 text-sm leading-relaxed text-muted-foreground'>
+					{question.details}
+				</p>
+			)}
+
+			<div className='mb-3 flex flex-wrap gap-2'>
+				{question.course && (
+					<span className='inline-flex items-center rounded-full bg-[#1EA7AE]/10 px-2.5 py-0.5 text-xs font-medium text-[#1EA7AE]'>
+						{question.course}
+					</span>
+				)}
+				{question.tags.map((tag, i) => (
+					<span
+						key={i}
+						className='inline-flex items-center rounded-full border border-border bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground'
+					>
+						{tag}
+					</span>
+				))}
+			</div>
+
+			<div className='flex items-center gap-4 text-xs text-muted-foreground'>
+				<span className='flex items-center gap-1.5'>
+					<HeartIcon />
+					{question.hearts}
+				</span>
+				<span className='flex items-center gap-1.5'>
+					<EyeIcon />
+					{question.views} {question.views === 1 ? 'view' : 'views'}
+				</span>
+			</div>
+		</div>
+	);
+}
+
+function AnswerCard({
+	answer,
+	onClick,
+}: {
+	answer: UserPostAnswer;
+	onClick?: () => void;
+}) {
+	return (
+		<div
+			className='cursor-pointer rounded-lg border border-border bg-card p-5 transition-shadow hover:shadow-md'
+			onClick={onClick}
+		>
+			<div className='mb-1 flex items-center gap-2 text-xs text-muted-foreground'>
+				<span className='flex items-center gap-1'>
+					<MessageCircleIcon />
+					Answered
+				</span>
+				<span>•</span>
+				<span>{timeAgo(answer.createdAt)}</span>
+			</div>
+
+			<p className='mb-2 text-xs text-muted-foreground'>
+				Re:{' '}
+				<span className='font-medium text-foreground'>{answer.questionTitle}</span>
+			</p>
+
+			<p className='mb-3 line-clamp-3 text-sm leading-relaxed text-muted-foreground'>
+				{answer.text}
+			</p>
+
+			<div className='flex items-center gap-4 text-xs text-muted-foreground'>
+				<span className='flex items-center gap-1.5'>
+					<HeartIcon />
+					{answer.hearts}
+				</span>
+			</div>
+		</div>
+	);
+}
+
+function CommentCard({
+	comment,
+	onClick,
+}: {
+	comment: UserPostComment;
+	onClick?: () => void;
+}) {
+	return (
+		<div
+			className='cursor-pointer rounded-lg border border-border bg-card p-5 transition-shadow hover:shadow-md'
+			onClick={onClick}
+		>
+			<div className='mb-1 flex items-center gap-2 text-xs text-muted-foreground'>
+				<span className='flex items-center gap-1'>
+					<MessageCircleIcon />
+					Commented
+				</span>
+				<span>•</span>
+				<span>{timeAgo(comment.createdAt)}</span>
+			</div>
+
+			<p className='mb-2 text-xs text-muted-foreground'>
+				Re:{' '}
+				<span className='font-medium text-foreground'>{comment.questionTitle}</span>
+			</p>
+
+			<p className='mb-3 line-clamp-3 text-sm leading-relaxed text-muted-foreground'>
+				{comment.text}
+			</p>
+
+			<div className='flex items-center gap-4 text-xs text-muted-foreground'>
+				<span className='flex items-center gap-1.5'>
+					<HeartIcon />
+					{comment.hearts}
+				</span>
+			</div>
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main component                                                     */
+/* ------------------------------------------------------------------ */
+
+export function UserPostsDashboard({
+	user,
+	questions,
+	answers,
+	comments,
+	onQuestionClick,
+	onAnswerClick,
+}: UserPostsDashboardProps) {
+	const [activeTab, setActiveTab] = useState<Tab>('questions');
+
+	const counts: Record<Tab, number> = useMemo(
+		() => ({
+			questions: questions.length,
+			answers: answers.length,
+			comments: comments.length,
+		}),
+		[questions, answers, comments],
+	);
+
+	const totalPosts = counts.questions + counts.answers + counts.comments;
+
+	return (
+		<div className='mx-auto w-full max-w-3xl px-4 py-8'>
+			{/* ---- Profile header ---- */}
+			<div className='mb-8 flex items-center gap-5'>
+				<UserAvatar user={user} />
+				<div>
+					<h1 className='text-2xl font-bold text-foreground'>{user.name}</h1>
+					{user.email && (
+						<p className='mt-0.5 text-sm text-muted-foreground'>{user.email}</p>
+					)}
+					<p className='mt-1 text-xs text-muted-foreground'>
+						{totalPosts} {totalPosts === 1 ? 'post' : 'posts'} in Q&A
+						{user.classYear ? ` · Class of ${user.classYear}` : ''}
+					</p>
+				</div>
+			</div>
+
+			{/* ---- Tab navigation ---- */}
+			<div className='mb-6 flex gap-1 border-b border-border'>
+				{(Object.keys(TAB_LABELS) as Tab[]).map((tab) => (
+					<button
+						key={tab}
+						type='button'
+						onClick={() => setActiveTab(tab)}
+						className={`relative px-4 py-2.5 text-sm font-medium transition-colors ${
+							activeTab === tab
+								? 'text-[#1EA7AE]'
+								: 'text-muted-foreground hover:text-foreground'
+						}`}
+					>
+						{TAB_LABELS[tab]}
+						<span className='ml-1.5 text-xs text-muted-foreground'>
+							{counts[tab]}
+						</span>
+
+						{/* Active indicator */}
+						{activeTab === tab && (
+							<span className='absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-[#1EA7AE]' />
+						)}
+					</button>
+				))}
+			</div>
+
+			{/* ---- Feed ---- */}
+			<div className='flex flex-col gap-4'>
+				{activeTab === 'questions' &&
+					(questions.length > 0 ? (
+						questions.map((q) => (
+							<QuestionCard
+								key={q.id}
+								question={q}
+								onClick={() => onQuestionClick?.(q.id)}
+							/>
+						))
+					) : (
+						<EmptyState label='questions' />
+					))}
+
+				{activeTab === 'answers' &&
+					(answers.length > 0 ? (
+						answers.map((a) => (
+							<AnswerCard
+								key={a.id}
+								answer={a}
+								onClick={() => onAnswerClick?.(a.questionId)}
+							/>
+						))
+					) : (
+						<EmptyState label='answers' />
+					))}
+
+				{activeTab === 'comments' &&
+					(comments.length > 0 ? (
+						comments.map((c) => (
+							<CommentCard key={c.id} comment={c} />
+						))
+					) : (
+						<EmptyState label='comments' />
+					))}
+			</div>
+		</div>
+	);
+}
+
+function EmptyState({ label }: { label: string }) {
+	return (
+		<div className='flex flex-col items-center justify-center py-16 text-center'>
+			<div className='mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-secondary'>
+				<MessageCircleIcon />
+			</div>
+			<p className='text-sm font-medium text-foreground'>No {label} yet</p>
+			<p className='mt-1 text-xs text-muted-foreground'>
+				Posts you make in Q&A will show up here.
+			</p>
+		</div>
+	);
+}
+
+export default UserPostsDashboard;
diff --git a/frontend/components/UserPostsDashboard/index.ts b/frontend/components/UserPostsDashboard/index.ts
new file mode 100644
index 0000000..b018394
--- /dev/null
+++ b/frontend/components/UserPostsDashboard/index.ts
@@ -0,0 +1,14 @@
+/**
+ * @overview Barrel exports for UserPostsDashboard.
+ *
+ * Copyright © 2021-2025 Hoagie Club and affiliates.
+ */
+
+export { UserPostsDashboard } from './UserPostsDashboard';
+export type {
+	UserPostsDashboardProps,
+	UserPostsUser,
+	UserPostQuestion,
+	UserPostAnswer,
+	UserPostComment,
+} from './UserPostsDashboard';

From 1e9f75689474aa6fc4fb8fbe176d369354cdec12 Mon Sep 17 00:00:00 2001
From: adambelouad <132090786+adambelouad@users.noreply.github.com>
Date: Wed, 25 Feb 2026 19:48:39 -0500
Subject: [PATCH 4/4] updated to evergreen

---
 .../UserPostsDashboard/UserPostsDashboard.tsx | 396 +++++++++---------
 1 file changed, 196 insertions(+), 200 deletions(-)

diff --git a/frontend/components/UserPostsDashboard/UserPostsDashboard.tsx b/frontend/components/UserPostsDashboard/UserPostsDashboard.tsx
index f21bdeb..8182f98 100644
--- a/frontend/components/UserPostsDashboard/UserPostsDashboard.tsx
+++ b/frontend/components/UserPostsDashboard/UserPostsDashboard.tsx
@@ -19,6 +19,20 @@
 
 import React, { useState, useMemo } from 'react';
 
+import {
+	Avatar,
+	Card,
+	ChatIcon,
+	EyeOpenIcon,
+	Heading,
+	HeartIcon,
+	majorScale,
+	Pane,
+	Tab,
+	TabNavigation,
+	Text,
+} from 'evergreen-ui';
+
 /* ------------------------------------------------------------------ */
 /*  Types                                                              */
 /* ------------------------------------------------------------------ */
@@ -72,9 +86,9 @@ export interface UserPostsDashboardProps {
 /*  Helpers                                                            */
 /* ------------------------------------------------------------------ */
 
-type Tab = 'questions' | 'answers' | 'comments';
+type TabKey = 'questions' | 'answers' | 'comments';
 
-const TAB_LABELS: Record<Tab, string> = {
+const TAB_LABELS: Record<TabKey, string> = {
 	questions: 'Questions',
 	answers: 'Answers',
 	comments: 'Comments',
@@ -103,89 +117,22 @@ function timeAgo(dateString: string): string {
 	return `${years}y ago`;
 }
 
-function getInitials(name: string): string {
-	return name
-		.split(' ')
-		.map((part) => part[0])
-		.join('')
-		.toUpperCase()
-		.slice(0, 2);
-}
-
-/* ------------------------------------------------------------------ */
-/*  Inline icons (match Post.tsx pattern)                              */
-/* ------------------------------------------------------------------ */
-
-const HeartIcon = () => (
-	<svg
-		xmlns='http://www.w3.org/2000/svg'
-		width='16'
-		height='16'
-		viewBox='0 0 24 24'
-		fill='none'
-		stroke='currentColor'
-		strokeWidth='2'
-		strokeLinecap='round'
-		strokeLinejoin='round'
-		className='h-4 w-4'
-	>
-		<path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' />
-	</svg>
-);
-
-const MessageCircleIcon = () => (
-	<svg
-		xmlns='http://www.w3.org/2000/svg'
-		width='16'
-		height='16'
-		viewBox='0 0 24 24'
-		fill='none'
-		stroke='currentColor'
-		strokeWidth='2'
-		strokeLinecap='round'
-		strokeLinejoin='round'
-		className='h-4 w-4'
-	>
-		<path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' />
-	</svg>
-);
-
-const EyeIcon = () => (
-	<svg
-		xmlns='http://www.w3.org/2000/svg'
-		width='16'
-		height='16'
-		viewBox='0 0 24 24'
-		fill='none'
-		stroke='currentColor'
-		strokeWidth='2'
-		strokeLinecap='round'
-		strokeLinejoin='round'
-		className='h-4 w-4'
-	>
-		<path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z' />
-		<circle cx='12' cy='12' r='3' />
-	</svg>
-);
-
 /* ------------------------------------------------------------------ */
 /*  Sub-components                                                     */
 /* ------------------------------------------------------------------ */
 
+const BRAND_COLOR = '#1EA7AE';
+
 function UserAvatar({ user }: { user: UserPostsUser }) {
-	if (user.avatarUrl) {
-		return (
-			<div
-				className='h-20 w-20 shrink-0 rounded-full border-4 border-white bg-gray-200 bg-cover bg-center shadow-sm'
-				style={{ backgroundImage: `url(${user.avatarUrl})` }}
-			/>
-		);
-	}
 
 	return (
-		<div className='flex h-20 w-20 shrink-0 items-center justify-center rounded-full border-4 border-white bg-[#1EA7AE] text-2xl font-bold text-white shadow-sm'>
-			{getInitials(user.name)}
-		</div>
+		<Avatar
+			name={user.name}
+			src={user.avatarUrl}
+			size={80}
+			backgroundColor={BRAND_COLOR}
+			color='white'
+		/>
 	);
 }
 
@@ -197,51 +144,78 @@ function QuestionCard({
 	onClick?: () => void;
 }) {
 	return (
-		<div
-			className='cursor-pointer rounded-lg border border-border bg-card p-5 transition-shadow hover:shadow-md'
+		<Card
+			elevation={0}
+			border='default'
+			borderRadius={8}
+			padding={majorScale(3)}
+			cursor='pointer'
 			onClick={onClick}
 		>
-			<div className='mb-1 flex items-center gap-2 text-xs text-muted-foreground'>
-				<span>Q&A</span>
-				<span>•</span>
-				<span>{timeAgo(question.createdAt)}</span>
-			</div>
+			<Pane display='flex' alignItems='center' gap={majorScale(1)} marginBottom={majorScale(1)}>
+				<Text size={300} color='muted'>
+					Q&A • {timeAgo(question.createdAt)}
+				</Text>
+			</Pane>
 
-			<h3 className='mb-2 text-base font-semibold text-foreground'>{question.title}</h3>
+			<Heading size={500} marginBottom={majorScale(2)}>
+				{question.title}
+			</Heading>
 
 			{question.details && (
-				<p className='mb-3 line-clamp-2 text-sm leading-relaxed text-muted-foreground'>
+				<Text size={400} color='muted' marginBottom={majorScale(3)}>
 					{question.details}
-				</p>
+				</Text>
 			)}
 
-			<div className='mb-3 flex flex-wrap gap-2'>
+			<Pane display='flex' flexWrap='wrap' gap={majorScale(1)} marginBottom={majorScale(3)}>
 				{question.course && (
-					<span className='inline-flex items-center rounded-full bg-[#1EA7AE]/10 px-2.5 py-0.5 text-xs font-medium text-[#1EA7AE]'>
-						{question.course}
-					</span>
+					<Pane
+						display='inline-flex'
+						alignItems='center'
+						paddingX={majorScale(2)}
+						paddingY={majorScale(1)}
+						borderRadius={9999}
+						backgroundColor={`${BRAND_COLOR}1A`}
+					>
+						<Text size={300} color={BRAND_COLOR}>
+							{question.course}
+						</Text>
+					</Pane>
 				)}
 				{question.tags.map((tag, i) => (
-					<span
+					<Pane
 						key={i}
-						className='inline-flex items-center rounded-full border border-border bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground'
+						display='inline-flex'
+						alignItems='center'
+						paddingX={majorScale(2)}
+						paddingY={majorScale(1)}
+						borderRadius={9999}
+						border='default'
+						backgroundColor='gray50'
 					>
-						{tag}
-					</span>
+						<Text size={300} color='muted'>
+							{tag}
+						</Text>
+					</Pane>
 				))}
-			</div>
-
-			<div className='flex items-center gap-4 text-xs text-muted-foreground'>
-				<span className='flex items-center gap-1.5'>
-					<HeartIcon />
-					{question.hearts}
-				</span>
-				<span className='flex items-center gap-1.5'>
-					<EyeIcon />
-					{question.views} {question.views === 1 ? 'view' : 'views'}
-				</span>
-			</div>
-		</div>
+			</Pane>
+
+			<Pane display='flex' alignItems='center' gap={majorScale(4)}>
+				<Pane display='flex' alignItems='center' gap={majorScale(1)}>
+					<HeartIcon size={14} color='muted' />
+					<Text size={300} color='muted'>
+						{question.hearts}
+					</Text>
+				</Pane>
+				<Pane display='flex' alignItems='center' gap={majorScale(1)}>
+					<EyeOpenIcon size={14} color='muted' />
+					<Text size={300} color='muted'>
+						{question.views} {question.views === 1 ? 'view' : 'views'}
+					</Text>
+				</Pane>
+			</Pane>
+		</Card>
 	);
 }
 
@@ -253,35 +227,41 @@ function AnswerCard({
 	onClick?: () => void;
 }) {
 	return (
-		<div
-			className='cursor-pointer rounded-lg border border-border bg-card p-5 transition-shadow hover:shadow-md'
+		<Card
+			elevation={0}
+			border='default'
+			borderRadius={8}
+			padding={majorScale(3)}
+			cursor='pointer'
 			onClick={onClick}
 		>
-			<div className='mb-1 flex items-center gap-2 text-xs text-muted-foreground'>
-				<span className='flex items-center gap-1'>
-					<MessageCircleIcon />
-					Answered
-				</span>
-				<span>•</span>
-				<span>{timeAgo(answer.createdAt)}</span>
-			</div>
-
-			<p className='mb-2 text-xs text-muted-foreground'>
-				Re:{' '}
-				<span className='font-medium text-foreground'>{answer.questionTitle}</span>
-			</p>
-
-			<p className='mb-3 line-clamp-3 text-sm leading-relaxed text-muted-foreground'>
+			<Pane display='flex' alignItems='center' gap={majorScale(1)} marginBottom={majorScale(1)}>
+				<ChatIcon size={14} color='muted' />
+				<Text size={300} color='muted'>
+					Answered • {timeAgo(answer.createdAt)}
+				</Text>
+			</Pane>
+
+			<Pane marginBottom={majorScale(2)} display='flex' flexWrap='wrap' alignItems='baseline'>
+				<Text size={300} color='muted'>
+					Re:{' '}
+				</Text>
+				<Text size={300} fontWeight={500}>
+					{answer.questionTitle}
+				</Text>
+			</Pane>
+
+			<Text size={400} color='muted' marginBottom={majorScale(3)}>
 				{answer.text}
-			</p>
+			</Text>
 
-			<div className='flex items-center gap-4 text-xs text-muted-foreground'>
-				<span className='flex items-center gap-1.5'>
-					<HeartIcon />
+			<Pane display='flex' alignItems='center' gap={majorScale(1)}>
+				<HeartIcon size={14} color='muted' />
+				<Text size={300} color='muted'>
 					{answer.hearts}
-				</span>
-			</div>
-		</div>
+				</Text>
+			</Pane>
+		</Card>
 	);
 }
 
@@ -293,35 +273,41 @@ function CommentCard({
 	onClick?: () => void;
 }) {
 	return (
-		<div
-			className='cursor-pointer rounded-lg border border-border bg-card p-5 transition-shadow hover:shadow-md'
+		<Card
+			elevation={0}
+			border='default'
+			borderRadius={8}
+			padding={majorScale(3)}
+			cursor='pointer'
 			onClick={onClick}
 		>
-			<div className='mb-1 flex items-center gap-2 text-xs text-muted-foreground'>
-				<span className='flex items-center gap-1'>
-					<MessageCircleIcon />
-					Commented
-				</span>
-				<span>•</span>
-				<span>{timeAgo(comment.createdAt)}</span>
-			</div>
-
-			<p className='mb-2 text-xs text-muted-foreground'>
-				Re:{' '}
-				<span className='font-medium text-foreground'>{comment.questionTitle}</span>
-			</p>
-
-			<p className='mb-3 line-clamp-3 text-sm leading-relaxed text-muted-foreground'>
+			<Pane display='flex' alignItems='center' gap={majorScale(1)} marginBottom={majorScale(1)}>
+				<ChatIcon size={14} color='muted' />
+				<Text size={300} color='muted'>
+					Commented • {timeAgo(comment.createdAt)}
+				</Text>
+			</Pane>
+
+			<Pane marginBottom={majorScale(2)} display='flex' flexWrap='wrap' alignItems='baseline'>
+				<Text size={300} color='muted'>
+					Re:{' '}
+				</Text>
+				<Text size={300} fontWeight={500}>
+					{comment.questionTitle}
+				</Text>
+			</Pane>
+
+			<Text size={400} color='muted' marginBottom={majorScale(3)}>
 				{comment.text}
-			</p>
+			</Text>
 
-			<div className='flex items-center gap-4 text-xs text-muted-foreground'>
-				<span className='flex items-center gap-1.5'>
-					<HeartIcon />
+			<Pane display='flex' alignItems='center' gap={majorScale(1)}>
+				<HeartIcon size={14} color='muted' />
+				<Text size={300} color='muted'>
 					{comment.hearts}
-				</span>
-			</div>
-		</div>
+				</Text>
+			</Pane>
+		</Card>
 	);
 }
 
@@ -337,9 +323,9 @@ export function UserPostsDashboard({
 	onQuestionClick,
 	onAnswerClick,
 }: UserPostsDashboardProps) {
-	const [activeTab, setActiveTab] = useState<Tab>('questions');
+	const [activeTab, setActiveTab] = useState<TabKey>('questions');
 
-	const counts: Record<Tab, number> = useMemo(
+	const counts: Record<TabKey, number> = useMemo(
 		() => ({
 			questions: questions.length,
 			answers: answers.length,
@@ -351,50 +337,42 @@ export function UserPostsDashboard({
 	const totalPosts = counts.questions + counts.answers + counts.comments;
 
 	return (
-		<div className='mx-auto w-full max-w-3xl px-4 py-8'>
+		<Pane maxWidth={majorScale(60)} marginX='auto' paddingX={majorScale(4)} paddingY={majorScale(6)}>
 			{/* ---- Profile header ---- */}
-			<div className='mb-8 flex items-center gap-5'>
+			<Pane display='flex' alignItems='center' gap={majorScale(5)} marginBottom={majorScale(6)}>
 				<UserAvatar user={user} />
-				<div>
-					<h1 className='text-2xl font-bold text-foreground'>{user.name}</h1>
+				<Pane>
+					<Heading size={700}>{user.name}</Heading>
 					{user.email && (
-						<p className='mt-0.5 text-sm text-muted-foreground'>{user.email}</p>
+						<Text size={400} color='muted' marginTop={2}>
+							{user.email}
+						</Text>
 					)}
-					<p className='mt-1 text-xs text-muted-foreground'>
+					<Text size={300} color='muted' marginTop={4}>
 						{totalPosts} {totalPosts === 1 ? 'post' : 'posts'} in Q&A
 						{user.classYear ? ` · Class of ${user.classYear}` : ''}
-					</p>
-				</div>
-			</div>
+					</Text>
+				</Pane>
+			</Pane>
 
 			{/* ---- Tab navigation ---- */}
-			<div className='mb-6 flex gap-1 border-b border-border'>
-				{(Object.keys(TAB_LABELS) as Tab[]).map((tab) => (
-					<button
+			<TabNavigation marginBottom={majorScale(4)}>
+				{(Object.keys(TAB_LABELS) as TabKey[]).map((tab) => (
+					<Tab
 						key={tab}
-						type='button'
-						onClick={() => setActiveTab(tab)}
-						className={`relative px-4 py-2.5 text-sm font-medium transition-colors ${
-							activeTab === tab
-								? 'text-[#1EA7AE]'
-								: 'text-muted-foreground hover:text-foreground'
-						}`}
+						id={tab}
+						isSelected={activeTab === tab}
+						appearance='primary'
+						onSelect={() => setActiveTab(tab)}
+						fontSize={14}
 					>
-						{TAB_LABELS[tab]}
-						<span className='ml-1.5 text-xs text-muted-foreground'>
-							{counts[tab]}
-						</span>
-
-						{/* Active indicator */}
-						{activeTab === tab && (
-							<span className='absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-[#1EA7AE]' />
-						)}
-					</button>
+						{TAB_LABELS[tab]} ({counts[tab]})
+					</Tab>
 				))}
-			</div>
+			</TabNavigation>
 
 			{/* ---- Feed ---- */}
-			<div className='flex flex-col gap-4'>
+			<Pane display='flex' flexDirection='column' gap={majorScale(4)}>
 				{activeTab === 'questions' &&
 					(questions.length > 0 ? (
 						questions.map((q) => (
@@ -429,22 +407,40 @@ export function UserPostsDashboard({
 					) : (
 						<EmptyState label='comments' />
 					))}
-			</div>
-		</div>
+			</Pane>
+		</Pane>
 	);
 }
 
 function EmptyState({ label }: { label: string }) {
 	return (
-		<div className='flex flex-col items-center justify-center py-16 text-center'>
-			<div className='mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-secondary'>
-				<MessageCircleIcon />
-			</div>
-			<p className='text-sm font-medium text-foreground'>No {label} yet</p>
-			<p className='mt-1 text-xs text-muted-foreground'>
+		<Pane
+			display='flex'
+			flexDirection='column'
+			alignItems='center'
+			justifyContent='center'
+			paddingY={majorScale(8)}
+			textAlign='center'
+		>
+			<Pane
+				marginBottom={majorScale(3)}
+				display='flex'
+				alignItems='center'
+				justifyContent='center'
+				width={majorScale(6)}
+				height={majorScale(6)}
+				borderRadius={9999}
+				backgroundColor='gray100'
+			>
+				<ChatIcon size={24} color='muted' />
+			</Pane>
+			<Text size={400} fontWeight={500}>
+				No {label} yet
+			</Text>
+			<Text size={300} color='muted' marginTop={4}>
 				Posts you make in Q&A will show up here.
-			</p>
-		</div>
+			</Text>
+		</Pane>
 	);
 }