Feat/lesson info modal

apps/academy/src/components/mdx/Components.tsx

@@ -3,6 +3,7 @@ import dracula from "react-syntax-highlighter/dist/cjs/styles/prism/dracula";
 
 import { CopyToClipboard } from "@/components/CopyToClipboard";
 import Callout from "@/components/mdx/Callout";
+import LessonInfoModal from "@/components/mdx/LessonInfoModal";
 import Question from "@/components/mdx/Question";
 import Quiz from "@/components/mdx/Quiz";
 import QuizStatusChecker from "@/components/mdx/QuizStatusChecker";
@@ -40,6 +41,7 @@ const Components = {
   QuizStatusChecker,
   Quiz,
   Question,
+  LessonInfoModal,
 };
 
 export default Components;

apps/academy/src/components/mdx/LessonInfoModal.tsx

@@ -0,0 +1,48 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from "ui";
+
+export interface LessonInfoModalProps {
+  buttonText: string;
+  title?: string;
+  children: React.ReactNode;
+}
+
+const LessonInfoModal = (props: LessonInfoModalProps): JSX.Element => {
+  const { buttonText, title } = props;
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          className={`mt-4 break-words bg-gray-700 text-sm font-bold h-[${
+            buttonText.length > 30 ? "3.75rem" : "2.5rem"
+          }`}
+        >
+          {buttonText}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className="modal-content">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-white">{title}</AlertDialogTitle>
+          <AlertDialogDescription>{props.children}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Ok</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default LessonInfoModal;

apps/academy/src/components/mdx/Quiz.tsx

@@ -39,7 +39,7 @@ type Answers = Record<string, number[]>;
 
 const Quiz = (props: QuizProps): JSX.Element => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
-  const quiz: Quiz = require(`@/data/quizzes/${props.quiz}.json`);
+  const quiz: Quiz = require(`@/data/quizzes/intro-to-ethereum/${props.quiz}.json`);
   const [showQuiz, setShowQuiz] = useState(false);
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [answers, setAnswers] = useState<Answers>({});

apps/academy/src/pages/tracks/intro-to-ethereum/1.mdx

@@ -8,6 +8,7 @@ import LessonLayout from "../../../components/LessonLayout";
 import Callout from "../../../components/mdx/Callout";
 import QuizStatusChecker from "../../../components/mdx/QuizStatusChecker";
 import SideDrawer from "../../../components/mdx/SideDrawer";
+import LessonInfoModal from "../../../components/mdx/LessonInfoModal";
 import Question from "../../../components/mdx/Question";
 
 <LessonLayout
@@ -128,14 +129,14 @@ w3.eth.get_block('latest')
 w3.eth.send_transaction({'from': ..., 'to': ..., 'value': ...})
 ```
 
-<SideDrawer buttonText="Did you get all that?" title="Comprehension Check">
+<LessonInfoModal buttonText="Did you get all that?" title="Comprehension Check">
   <Question question="eth-intro-1/2-checkin/Q1" />
   <Question question="eth-intro-1/2-checkin/Q2" />
   <Question question="eth-intro-1/2-checkin/Q3" />
   <Question question="eth-intro-1/2-checkin/Q4" />
   <Question question="eth-intro-1/2-checkin/Q5" />
   <Question question="eth-intro-1/2-checkin/Q6" />
-</SideDrawer>
+</LessonInfoModal>
 <br />
 
 ### **Installation**

apps/academy/src/styles.css

@@ -31,3 +31,19 @@
   background-size: cover;
   background-position: center;
 }
+
+.modal-content {
+  @apply max-h-screen overflow-auto bg-[#1C1C1C];
+
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply rounded-full bg-transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-[#3A3939];
+  }
+}

packages/ui/package.json

@@ -56,5 +56,8 @@
     "tailwindcss-config": "workspace:*",
     "typescript-config": "workspace:*",
     "vaul": "^0.8.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5"
   }
 }

packages/ui/src/components/index.ts

@@ -9,6 +9,7 @@ export * from "./Logo";
 export * from "./Navigation";
 export * from "./SideBar";
 export * from "./Topbar";
+export * from "./ui/alert-dialog";
 export * from "./ui/badge";
 export * from "./ui/dialog";
 export * from "./ui/drawer";

packages/ui/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "./button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};