tmp

Author: ChristopherChudzicki

frontends/main/package.json

@@ -22,6 +22,7 @@
     "@sentry/nextjs": "^8.36.0",
     "@tanstack/react-query": "^4.36.1",
     "api": "workspace:*",
+    "classnames": "^2.5.1",
     "formik": "^2.4.6",
     "iso-639-1": "^3.1.4",
     "lodash": "^4.17.21",

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx

@@ -20,7 +20,11 @@ import {
 } from "@mitodl/smoot-design"
 import type { LearningResource } from "api"
 import { ResourceTypeEnum, PlatformEnum } from "api"
-import { DEFAULT_RESOURCE_IMG, getReadableResourceType } from "ol-utilities"
+import {
+  DEFAULT_RESOURCE_IMG,
+  getReadableResourceType,
+  useToggle,
+} from "ol-utilities"
 import {
   RiBookmarkFill,
   RiBookmarkLine,
@@ -32,11 +36,13 @@ import {
   RiMenuAddLine,
   RiShareLine,
   RiTwitterXLine,
+  RiSparkling2Line,
 } from "@remixicon/react"
 
 import InfoSection from "./InfoSection"
 import type { User } from "api/hooks/user"
 import VideoFrame from "./VideoFrame"
+import classNames from "classnames"
 
 const DRAWER_WIDTH = "900px"
 
@@ -735,14 +741,18 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
   onAddToUserListClick,
   closeDrawer,
 }) => {
+  const [showTutor, setShowTutor] = useToggle(false)
   const outerContainerRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     if (outerContainerRef.current && outerContainerRef.current.scrollTo) {
       outerContainerRef.current.scrollTo(0, 0)
     }
   }, [resourceId])
   return (
-    <Outer className="tutor-enabled" ref={outerContainerRef}>
+    <Outer
+      className={classNames({ "tutor-enabled": showTutor })}
+      ref={outerContainerRef}
+    >
       <TitleSection
         titleId={titleId}
         resource={resource}
@@ -767,6 +777,15 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
                   onAddToLearningPathClick={onAddToLearningPathClick}
                   onAddToUserListClick={onAddToUserListClick}
                 />
+                {showTutor ? null : (
+                  <Button
+                    onClick={setShowTutor.on}
+                    variant="secondary"
+                    endIcon={<RiSparkling2Line />}
+                  >
+                    Need help? Ask our Tutor.
+                  </Button>
+                )}
               </ContentRight>
             </ContentContainer>
             {topCarousels && (