Implementing QuestionPanel

frontend/components/QuestionPanel/QuestionPanel.module.css

@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+.container {
+	display: flex !important;
+	flex-direction: column !important;
+	justify-self: center;
+	justify-content: left;
+	width: 70rem !important;
+}
+
+.content {
+	font-family: 'Roboto', sans-serif !important;
+}
+
+.header {
+	display: flex !important;
+	justify-content: left !important;
+	align-items: center !important;
+	gap: 5.5rem !important;
+	margin-bottom: 1.5rem !important;
+	height: 3.75rem !important;
+}
+
+.title {
+	width: 55rem !important;
+	word-wrap: break-word !important;
+	font-size: 2rem !important;
+	font-weight: 700 !important;
+	color: #1e2b49 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	line-height: 1.2 !important;
+}
+
+.metadata {
+	font-size: 0.8rem !important;
+	font-weight: 300 !important;
+	color: #858ba4 !important;
+	margin-bottom: 1.8rem !important;
+	display: block !important;
+}
+
+.details {
+	width: 57rem !important;
+	word-wrap: break-word !important;
+	font-size: 1rem !important;
+	font-weight: 500 !important;
+	color: #000 !important;
+	margin-bottom: 1.25rem !important;
+	margin-top: 0 !important;
+}
+
+.backButton {
+	display: flex !important;
+	width: 6rem !important;
+	height: 2rem !important;
+	min-width: 6rem !important;
+	min-height: 2rem !important;
+	max-width: 6rem !important;
+	max-height: 2rem !important;
+	justify-content: center !important;
+	align-items: center !important;
+	background-color: #ff5757 !important;
+	color: #fff !important;
+	border: none !important;
+	border-radius: 0.375rem !important;
+	font-family: 'Roboto', sans-serif !important;
+	font-size: 0.75rem !important;
+	font-weight: 400 !important;
+	cursor: pointer !important;
+	padding: 0 !important;
+	box-shadow: none !important;
+	transition:
+		background-color 0.2s ease,
+		transform 0.2s ease !important;
+}
+
+.backButton:hover {
+	background-color: #ff3131 !important;
+	transform: scale(1.05) !important;
+	box-shadow: none !important;
+}

frontend/components/QuestionPanel/QuestionPanel.tsx

@@ -0,0 +1,80 @@
+import { Pane, Heading, Button, Text, Paragraph } from 'evergreen-ui';
+
+import styles from './QuestionPanel.module.css';
+
+interface QuestionPanelProps {
+	user: string;
+	title: string;
+	tags: string[];
+	details: string;
+	create_time: Date;
+	user_is_anonymous: boolean;
+	onBack: () => void;
+}
+
+function formatTimePassed(input: Date | string | number): string {
+	const now = Date.now();
+	const past = new Date(input).getTime();
+
+	const diffMs = now - past;
+	if (diffMs < 0) return 'just now';
+
+	const seconds = Math.floor(diffMs / 1000);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	const weeks = Math.floor(days / 7);
+	const months = Math.floor(days / 30);
+	const years = Math.floor(days / 365);
+
+	if (seconds < 60) return 'just now';
+	if (minutes < 60) return `${minutes} min${minutes === 1 ? '' : 's'} ago`;
+	if (hours < 24) return `${hours} hr${hours === 1 ? '' : 's'} ago`;
+	if (days < 7) return `${days} day${days === 1 ? '' : 's'} ago`;
+	if (weeks < 4) return `${weeks} wk${weeks === 1 ? '' : 's'} ago`;
+	if (months < 12) return `${months} mo${months === 1 ? '' : 's'} ago`;
+
+	return `${years} yr${years === 1 ? '' : 's'} ago`;
+}
+
+function formatMetadata(
+	user: string,
+	tags: string[],
+	create_time: Date,
+	user_is_anonymous: boolean
+): string {
+	const displayUser = user_is_anonymous === true ? 'Anonymous' : user;
+	const displayTag = tags[0];
+	const displayTimePassed = formatTimePassed(create_time);
+
+	return `${displayUser} • ${displayTag} • ${displayTimePassed}`;
+}
+
+const QuestionPanel = ({
+	user,
+	title,
+	tags,
+	details,
+	create_time,
+	user_is_anonymous,
+	onBack,
+}: QuestionPanelProps) => {
+	const displayInformation = formatMetadata(user, tags, create_time, user_is_anonymous);
+
+	return (
+		<Pane className={styles.container}>
+			<Pane className={styles.content}>
+				<Pane className={styles.header}>
+					<Heading className={styles.title}>{title}</Heading>
+					<Button className={styles.backButton} onClick={onBack}>
+						Back to Q&A
+					</Button>
+				</Pane>
+				<Text className={styles.metadata}>{displayInformation}</Text>
+				<Paragraph className={styles.details}>{details}</Paragraph>
+			</Pane>
+		</Pane>
+	);
+};
+
+export default QuestionPanel;