fix: higlight current period

Author: debater-coder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timetabl-app",
-  "version": "1.0.8-beta",
+  "version": "1.0.9-beta",
   "description": "",
   "main": "index.js",
   "scripts": {

src/components/DTTPeriod/DTTPeriod.tsx

@@ -8,11 +8,11 @@ import { Period } from "../Period";
 export const DTTPeriod = ({
   period,
   isLoaded,
-  date,
+  active,
 }: {
   period: TimetablPeriod;
   isLoaded: boolean;
-  date?: string;
+  active: boolean;
 }) => {
   const {
     showTimesInsteadOfRooms,
@@ -28,11 +28,7 @@ export const DTTPeriod = ({
 
   return (
     <Period
-      active={
-        (DateTime.fromISO(`${date}T${period.time}`) < DateTime.now() &&
-          DateTime.now() < DateTime.fromISO(`${date}T${period.endTime}`)) ??
-        false
-      }
+      active={active}
       colour={
         period.room &&
         {

src/routes/Main/Home/Home.tsx

@@ -62,6 +62,13 @@ const HomeView = ({
 
   const [countdown, setCountdown] = useState("");
 
+  const activeIndex = periods.findIndex(
+    ({ time, endTime }: { time: string; endTime: string }) =>
+      (DateTime.fromISO(`${date}T${time}`) < DateTime.now() &&
+        DateTime.now() < DateTime.fromISO(`${date}T${endTime}`)) ??
+      false
+  );
+
   return (
     <LayoutGroup>
       <Flex direction={"column"} align="center" gap={1.5}>
@@ -129,6 +136,7 @@ const HomeView = ({
           {periods.length ? (
             periods.map((period, index) => (
               <DTTPeriod
+                active={activeIndex === index}
                 period={period}
                 key={period.key ?? index + 100}
                 isLoaded={isLoaded}