Separate RMP and syllabus summaries

src/app/dashboard/Right.tsx

@@ -1,3 +1,4 @@
+import BaseCard from '@/components/common/BaseCard/BaseCard';
 import Compare from '@/components/compare/Compare/Compare';
 import Carousel from '@/components/navigation/Carousel/Carousel';
 import CourseOverview, {
@@ -12,7 +13,6 @@ import fetchGrades from '@/modules/fetchGrades';
 import fetchProfessor from '@/modules/fetchProfessor';
 import fetchRmp from '@/modules/fetchRmp';
 import { type SearchQuery, type SearchResult } from '@/types/SearchQuery';
-import { Card } from '@mui/material';
 import React, { Suspense } from 'react';
 import ServerLeft from './ServerLeft';
 
@@ -54,13 +54,13 @@ export function LoadingRight(props: LoadingRightProps) {
   }
 
   return (
-    <Card
+    <BaseCard
       className={`${props.isMobile ? 'bg-transparent bg-none shadow-none overflow-visible' : ''}`}
     >
       <Carousel key={names.join()} names={names} isMobile={props.isMobile}>
         {tabs}
       </Carousel>
-    </Card>
+    </BaseCard>
   );
 }
 
@@ -118,7 +118,7 @@ export default async function Right(props: Props) {
     const [profData, grades, rmp] = professorResults;
     names.push('Professor');
     tabs.push(
-      <Card
+      <BaseCard
         key="professor"
         className={`${props.isMobile ? 'p-6' : 'bg-transparent bg-none shadow-none'}`}
       >
@@ -128,15 +128,15 @@ export default async function Right(props: Props) {
           grades={grades}
           rmp={rmp}
         />
-      </Card>,
+      </BaseCard>,
     );
   }
 
   if (courseResults) {
     const [courseData, grades] = courseResults;
     names.push('Class');
     tabs.push(
-      <Card
+      <BaseCard
         key="course"
         className={`${props.isMobile ? 'p-6' : 'bg-transparent bg-none shadow-none'}`}
       >
@@ -145,7 +145,7 @@ export default async function Right(props: Props) {
           courseData={courseData}
           grades={grades}
         />
-      </Card>,
+      </BaseCard>,
     );
   }
 
@@ -155,12 +155,12 @@ export default async function Right(props: Props) {
   }
 
   return (
-    <Card
+    <BaseCard
       className={`${props.isMobile ? 'bg-transparent bg-none shadow-none overflow-visible' : ''}`}
     >
       <Carousel key={names.join()} names={names} isMobile={props.isMobile}>
         {tabs}
       </Carousel>
-    </Card>
+    </BaseCard>
   );
 }

src/components/common/BaseCard/BaseCard.tsx

@@ -0,0 +1,37 @@
+type CardVariant = 'flat' | 'interactive' | 'transparent';
+
+type BaseCardProps = {
+  children: React.ReactNode;
+  variant?: CardVariant;
+  className?: string;
+  style?: React.CSSProperties;
+  id?: string;
+};
+
+const baseClasses = 'rounded-lg';
+
+const variantClasses: Record<CardVariant, string> = {
+  flat: 'shadow-sm dark:shadow-md',
+  interactive:
+    'shadow-lg dark:shadow-lg transition-all hover:shadow-xl dark:hover:shadow-2xl',
+  transparent: '',
+};
+
+export default function BaseCard({
+  children,
+  variant = 'flat',
+  className = '',
+  style,
+  id,
+}: BaseCardProps) {
+  const hasBgClass = className.includes('bg-');
+  return (
+    <div
+      {...(id ? { id } : {})}
+      style={style}
+      className={`${baseClasses} ${hasBgClass || variant === 'transparent' ? '' : 'bg-white dark:bg-neutral-800'} ${variantClasses[variant]} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/common/RmpSummary/RmpSummary.tsx

@@ -2,31 +2,49 @@
 
 import { type SearchQuery } from '@/types/SearchQuery';
 import { Skeleton, Tooltip, Typography } from '@mui/material';
+import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
-export function LoadingRmpSummary() {
+type LoadingRmpSummaryProps = {
+  legacyId?: string;
+};
+
+export function LoadingRmpSummary({ legacyId }: LoadingRmpSummaryProps) {
   return (
     <>
-      <Skeleton variant="text" />
       <Skeleton variant="text" />
       <Skeleton variant="text" />
       <Skeleton variant="text" className="w-1/2" />
-      <Typography
-        variant="overline"
-        className="text-gray-700 dark:text-gray-300"
-      >
-        AI REVIEW SUMMARY
-      </Typography>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Typography
+          variant="overline"
+          className="text-gray-700 dark:text-gray-300"
+        >
+          AI REVIEW SUMMARY
+        </Typography>
+        {legacyId ? (
+          <Link
+            href={'https://www.ratemyprofessors.com/professor/' + legacyId}
+            target="_blank"
+            className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+          >
+            Visit Rate My Professors
+          </Link>
+        ) : (
+          <p>Visit Rate My Professors</p>
+        )}
+      </div>
     </>
   );
 }
 
 type Props = {
   open: boolean;
   searchQuery: SearchQuery;
+  legacyId: string;
 };
 
-export default function RmpSummary({ open, searchQuery }: Props) {
+export default function RmpSummary({ open, searchQuery, legacyId }: Props) {
   const [summary, setSummary] = useState<string | null>(null);
   const [error, setError] = useState(false);
 
@@ -72,27 +90,47 @@ export default function RmpSummary({ open, searchQuery }: Props) {
   }, [open, searchQuery]);
 
   if (status === 'error') {
-    return <p>Problem loading AI review summary.</p>;
+    return (
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p>Problem loading AI review summary.</p>
+        <Link
+          href={'https://www.ratemyprofessors.com/professor/' + legacyId}
+          target="_blank"
+          className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+        >
+          Visit Rate My Professors
+        </Link>
+      </div>
+    );
   }
 
   if (!summary) {
-    return <LoadingRmpSummary />;
+    return <LoadingRmpSummary legacyId={legacyId} />;
   }
 
   return (
     <>
       <p>{summary}</p>
-      <Tooltip
-        title="This summary is AI generated. Please double check any important information"
-        placement="right"
-      >
-        <Typography
-          variant="overline"
-          className="text-gray-700 dark:text-gray-300"
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Tooltip
+          title="This summary is AI generated. Please double check any important information"
+          placement="right"
         >
-          AI REVIEW SUMMARY
-        </Typography>
-      </Tooltip>
+          <Typography
+            variant="overline"
+            className="text-gray-700 dark:text-gray-300"
+          >
+            AI REVIEW SUMMARY
+          </Typography>
+        </Tooltip>
+        <Link
+          href={'https://www.ratemyprofessors.com/professor/' + legacyId}
+          target="_blank"
+          className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+        >
+          Visit Rate My Professors
+        </Link>
+      </div>
     </>
   );
 }