Create CourseInfoHeader.tsx

web/src/components/CourseInfoHeader.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+
+type Person = { name: string; email: string };
+
+export type CourseInfo = {
+  id: string;
+  name: string;
+  instructor: Person;
+  teachingAssistant: Person;
+};
+
+function buildMailto(email: string, subject: string, body?: string) {
+  const s = encodeURIComponent(subject);
+  const b = body ? `&body=${encodeURIComponent(body)}` : "";
+  return `mailto:${encodeURIComponent(email)}?subject=${s}${b}`;
+}
+
+export function CourseInfoHeader({
+  course,
+  className,
+}: {
+  course: CourseInfo;
+  className?: string;
+}) {
+  const instructorMailto = useMemo(() => {
+    return buildMailto(
+      course.instructor.email,
+      `[Clare] Question about ${course.name}`,
+      `Hi ${course.instructor.name},\n\nI have a question about ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
+    );
+  }, [course]);
+
+  const taMailto = useMemo(() => {
+    return buildMailto(
+      course.teachingAssistant.email,
+      `[Clare] Help request for ${course.name}`,
+      `Hi ${course.teachingAssistant.name},\n\nI need help with ${course.name}:\n\n(Write your question here)\n\nThanks,\n`
+    );
+  }, [course]);
+
+  return (
+    <div className={className ?? "px-4 pt-4 pb-3"}>
+      <div className="space-y-1">
+        <div className="text-base font-semibold text-foreground truncate">
+          {course.name}
+        </div>
+
+        <div className="text-sm text-muted-foreground">
+          Instructor:{" "}
+          <a
+            href={instructorMailto}
+            className="text-primary hover:underline"
+            title={`Email ${course.instructor.name}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {course.instructor.name}
+          </a>
+        </div>
+
+        <div className="text-sm text-muted-foreground">
+          TA:{" "}
+          <a
+            href={taMailto}
+            className="text-primary hover:underline"
+            title={`Email ${course.teachingAssistant.name}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {course.teachingAssistant.name}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}