Merge pull request #169 from appKom/important-note

Created new ImportantNote component
appKom · Jul 21, 2024 · 9757213 · 9757213
2 parents 10c1c7f + 2905f06
commit 9757213
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 43 deletions.
diff --git a/components/ImportantNote.tsx b/components/ImportantNote.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+const ImportantNote = ({
+  prefix,
+  text,
+  isLoading,
+}: {
+  prefix: string;
+  text: string | React.ReactNode;
+  isLoading?: boolean;
+}) => {
+  return (
+    <div className="flex items-center max-w-full p-4 mx-5 mb-5 text-sm text-yellow-500 rounded-md dark:text-online-orange bg-yellow-50 dark:bg-gray-800">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        className="flex-shrink-0 w-5 h-5 mr-3"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+          clipRule="evenodd"
+        />
+      </svg>
+      {isLoading ? (
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
+      ) : (
+        <div>
+          <b className="mr-2">{prefix}</b>
+          {text}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImportantNote;
diff --git a/components/committee/CommitteeInterviewTimes.tsx b/components/committee/CommitteeInterviewTimes.tsx
@@ -8,7 +8,7 @@ import { periodType, committeeInterviewType } from "../../lib/types/types";
 import toast from "react-hot-toast";
 import NotFound from "../../pages/404";
 import Button from "../Button";
-import LoadingPage from "../LoadingPage";
+import ImportantNote from "../ImportantNote";
 
 interface Interview {
   start: string;
@@ -224,9 +224,9 @@ const CommitteeInterviewTimes = ({
 
   useEffect(() => {
     if (period) {
+      setCountdown(getSubmissionDeadline());
       const intervalId = setInterval(() => {
-        const deadline = getSubmissionDeadline();
-        setCountdown(deadline);
+        setCountdown(getSubmissionDeadline());
       }, 1000);
       return () => clearInterval(intervalId);
     }
@@ -280,27 +280,13 @@ const CommitteeInterviewTimes = ({
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex flex-row gap-2 mt-5 mb-6 text-2xl font-semibold text-center px-5">
+      <div className="flex flex-row gap-2 px-5 mt-5 mb-6 text-2xl font-semibold text-center">
         Legg inn ledige tider for intervjuer
       </div>
-      <div className="flex max-w-full p-4 mx-5 mb-5 text-sm text-yellow-500 rounded-md dark:text-online-orange bg-yellow-50 dark:bg-gray-800">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          className="flex-shrink-0 w-5 h-5 mr-3"
-        >
-          <path
-            fillRule="evenodd"
-            d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-            clipRule="evenodd"
-          />
-        </svg>
-        <div>
-          <b className="mr-2">NB!</b>
-          Fristen for å legge inn tider er {countdown}
-        </div>
-      </div>
+      <ImportantNote
+        prefix="NB"
+        text={`Fristen for å legge inn tider er ${countdown}`}
+      />
 
       <p className="px-5 my-5 text-lg text-center">
         Velg ledige tider ved å trykke på eller dra over flere celler.

diff --git a/components/committee/Schedule.tsx b/components/committee/Schedule.tsx
@@ -2,6 +2,7 @@ import ScheduleColumn from "./ScheduleColumn";
 import getTimeSlots from "../../utils/getTimeSlots";
 import { useState, useEffect } from "react";
 import { DeepPartial, applicantType } from "../../lib/types/types";
+import ImportantNote from "../ImportantNote";
 
 interface Props {
   interviewLength: number;
@@ -161,27 +162,16 @@ export default function Schedule({
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex max-w-full p-4 mx-5 mb-5 text-sm text-yellow-500 rounded-md dark:text-online-orange bg-yellow-50 dark:bg-gray-800">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          className="flex-shrink-0 w-5 h-5 mr-3"
-        >
-          <path
-            fillRule="evenodd"
-            d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-            clipRule="evenodd"
-          />
-        </svg>
-        <div>
-          <b className="mr-2">Valgfritt</b>
-          Legg til tider du&nbsp;
-          <span className="font-semibold">IKKE</span>&nbsp;er ledig for
-          intervju. Flere ledige tider øker sjansen for automatisk tildeling av
-          intervjutider!
-        </div>
-      </div>
+      <ImportantNote
+        prefix="Valgfritt"
+        text={
+          <>
+            Legg inn tider du&nbsp;<span className="font-bold">IKKE</span>
+            &nbsp;er ledig for intervju. Flere ledige tider øker sjansen for
+            automatisk tildeling av intervjutider!
+          </>
+        }
+      />
       <div className="flex gap-10">
         <AvailabilityIndicator isAvailable />
         <AvailabilityIndicator />