Merge branch 'main' into important-note

appKom · Jul 21, 2024 · 2905f06 · 2905f06
2 parents afa5402 + 10c1c7f
commit 2905f06
Showing 1 changed file with 18 additions and 11 deletions.
diff --git a/components/committee/Schedule.tsx b/components/committee/Schedule.tsx
@@ -172,17 +172,9 @@ export default function Schedule({
           </>
         }
       />
-      <div className="flex justify-center gap-10 text-gray-700 dark:text-white">
-        <div className="flex items-center gap-2">
-          <div className="w-16 h-8 bg-green-300 border border-gray-300 rounded-sm dark:border-gray-700"></div>
-          Jeg er ledig
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="w-16 h-8 bg-red-300 border border-gray-300 rounded-sm dark:border-gray-700"></div>
-          <div>
-            Jeg er <span className="font-bold">IKKE</span> ledig
-          </div>
-        </div>
+      <div className="flex gap-10">
+        <AvailabilityIndicator isAvailable />
+        <AvailabilityIndicator />
       </div>
       <div className="flex px-5 py-4 mt-5 border border-gray-200 rounded-md shadow w-max dark:bg-gray-800 dark:border-gray-700">
         <div className="flex flex-col justify-end">
@@ -208,3 +200,18 @@ export default function Schedule({
     </div>
   );
 }
+
+const AvailabilityIndicator = ({ isAvailable }: { isAvailable?: boolean }) => {
+  return (
+    <div className="flex items-center gap-2 text-gray-700 dark:text-white">
+      <div
+        className={`w-16 h-8 border border-gray-300 rounded-sm dark:border-gray-700 ${
+          isAvailable ? "bg-green-300" : "bg-red-300"
+        }`}
+      ></div>
+      <div>
+        Jeg er {!isAvailable && <span className="font-bold">IKKE</span>} ledig
+      </div>
+    </div>
+  );
+};