added skip button

DanielWTE · Jul 7, 2024 · fd63ed9 · fd63ed9
1 parent df8b9af
commit fd63ed9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/components/course/CourseHandler.tsx b/components/course/CourseHandler.tsx
@@ -3,7 +3,10 @@
 import { useGetQuestion } from "@/hooks/data/getQuestion";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { SimpleButtonWithLoader } from "../elements/Buttons";
+import {
+  SimpleButtonWithLoader,
+  SimpleButtonWithLoaderSmall,
+} from "../elements/Buttons";
 import { mutate } from "swr";
 import { useSearchParams } from "next/navigation";
 import toast from "react-hot-toast";
@@ -206,6 +209,30 @@ export default function CourseHandlerComponent({
                 />
               )}
             </div>
+            {!correctAnswer && (
+              <>
+                <div className="relative">
+                  <div
+                    aria-hidden="true"
+                    className="absolute inset-0 flex items-center"
+                  >
+                    <div className="w-full border-t border-gray-300" />
+                  </div>
+                  <div className="relative flex justify-center mt-4">
+                    <span className="bg-slate-100 px-2 text-sm text-gray-500">
+                      Mehr Aktionen &darr;
+                    </span>
+                  </div>
+                </div>
+                <div className="flex justify-center mt-4 gap-4">
+                  <SimpleButtonWithLoaderSmall
+                    text="Neue Frage"
+                    onClick={getNewQuestion}
+                    isLoading={false}
+                  />
+                </div>
+              </>
+            )}
           </div>
         )}
         <AnimatePresence>

diff --git a/components/elements/Buttons.tsx b/components/elements/Buttons.tsx
@@ -85,4 +85,26 @@ export function SimpleButtonDanger({
       {text}
     </button>
   );
+}
+
+export function SimpleButtonWithLoaderSmall({
+  text,
+  onClick,
+  isLoading,
+}: {
+  text: string;
+  onClick: any;
+  isLoading: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      className={`rounded-md bg-white px-2 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50
+      ${isLoading ? "bg-gray-300 hover:bg-gray-200" : ""}`}
+      onClick={onClick}
+      disabled={isLoading}
+    >
+      {isLoading ? <ButtonLoaderWithoutMargin isSubmitting={true} /> : text}
+    </button>
+  );
 }