Created a simple Practice Badge to showcase when an exercise is a practice exercise

src/components/Exercises/MultipleChoice.tsx

@@ -7,6 +7,7 @@ import reactStringReplace from "react-string-replace";
 import { CommonProps } from ".";
 import Button from "../Low/Button";
 import { v4 } from "uuid";
+import PracticeBadge from "../Low/PracticeBadge";
 
 function Question({
 	id,
@@ -15,10 +16,12 @@ function Question({
 	options,
 	userSolution,
 	onSelectOption,
+	isPractice = false
 }: MultipleChoiceQuestion & {
 	userSolution: string | undefined;
 	onSelectOption?: (option: string) => void;
 	showSolution?: boolean;
+	isPractice?: boolean
 }) {
 	const renderPrompt = (prompt: string) => {
 		return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
@@ -28,7 +31,8 @@ function Question({
 	};
 
 	return (
-		<div className="flex flex-col gap-8">
+		<div className="flex flex-col gap-8 relative">
+			{isPractice && <PracticeBadge className="absolute -top-4 -right-12" />}
 			{isNaN(Number(id)) ? (
 				<span className="text-lg">{renderPrompt(prompt).filter((x) => x?.toString() !== "<u>")}</span>
 			) : (
@@ -194,6 +198,7 @@ export default function MultipleChoice({
 				key={question.id} className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 				<Question
 					{...question}
+					isPractice={isPractice}
 					userSolution={answers.find((x) => question.id === x.question)?.option}
 					onSelectOption={(option) => onSelectOption(option, question)}
 				/>
@@ -206,6 +211,7 @@ export default function MultipleChoice({
 				{questionIndex < questions.length && (
 					<Question
 						{...questions[questionIndex]}
+						isPractice={isPractice}
 						userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
 						onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
 					/>
@@ -216,6 +222,7 @@ export default function MultipleChoice({
 				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
 					<Question
 						{...questions[questionIndex + 1]}
+						isPractice={isPractice}
 						userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
 						onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
 					/>