Path info refactor

src/apps/path-finder/components/cell-info/cell-info.module.scss

@@ -0,0 +1,42 @@
+.cellInfo {
+  display: none;
+  gap: 20px;
+  margin-right: 60px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .item {
+    height: 15px;
+    width: 15px;
+  }
+
+  .start {
+    background-color: var(--pf-cell-entry);
+  }
+
+  .end {
+    background-color: var(--pf-cell-exit);
+  }
+
+  .wall {
+    background-color: var(--pf-cell-wall);
+  }
+
+  .visited {
+    background-color: var(--pf-cell-visited);
+  }
+
+  .path {
+    background-color: var(--pf-cell-path);
+  }
+}
+
+@media (width >= 768px) {
+  .cellInfo {
+    display: flex;
+  }
+}

src/apps/path-finder/components/cell-info/cell-info.tsx

@@ -0,0 +1,30 @@
+import classes from './cell-info.module.scss';
+
+function CellInfo() {
+  return (
+    <div className={classes.cellInfo}>
+      <div>
+        <div className={`${classes.item} ${classes.start}`}></div>
+        <span>Start</span>
+      </div>
+      <div>
+        <div className={`${classes.item} ${classes.end}`}></div>
+        <span>End</span>
+      </div>
+      <div>
+        <div className={`${classes.item} ${classes.wall}`}></div>
+        <span>Wall</span>
+      </div>
+      <div>
+        <div className={`${classes.item} ${classes.visited}`}></div>
+        <span>Visited</span>
+      </div>
+      <div>
+        <div className={`${classes.item} ${classes.path}`}></div>
+        <span>Path</span>
+      </div>
+    </div>
+  );
+}
+
+export default CellInfo;

src/apps/path-finder/components/controller/controller.module.scss

@@ -11,50 +11,14 @@
     gap: 10px;
   }
 
-  .info {
-    display: none;
-    gap: 20px;
-
-    & > div {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-
-    .info__item {
-      height: 15px;
-      width: 15px;
-    }
-
-    .info__start {
-      background-color: var(--pf-cell-entry);
-    }
-
-    .info__end {
-      background-color: var(--pf-cell-exit);
-    }
-
-    .info__wall {
-      background-color: var(--pf-cell-wall);
-    }
-
-    .info__visited {
-      background-color: var(--pf-cell-visited);
-    }
-
-    .info__path {
-      background-color: var(--pf-cell-path);
-    }
-  }
-
   .execution {
     display: flex;
     gap: 10px;
   }
 
   .mazeSelector,
   .pathFinder {
-    width: 100px;
+    width: 125px;
     border: 1px solid theme.$base;
     padding: 0 5px;
   }
@@ -68,14 +32,27 @@
     display: none;
   }
 
-  .time {
-    font-weight: 600;
-    min-width: 3ch;
-    display: inline-block;
+  .pathInfo {
+    display: none;
+    gap: 10px;
+
+    .highlight {
+      font-weight: 600;
+      min-width: 3ch;
+      display: inline-block;
+    }
   }
 }
 
-@media (width >= 768px) {
+@media (width >= 600px) {
+  .controller {
+    .pathInfo {
+      display: flex;
+    }
+  }
+}
+
+@media (width >= 910px) {
   .controller {
     .speed,
     .play {
@@ -98,14 +75,6 @@
   }
 }
 
-@media (width >= 1200px) {
-  .controller {
-    .info {
-      display: flex;
-    }
-  }
-}
-
 [data-theme='dark'] {
   .execution {
     img {

src/apps/path-finder/components/controller/controller.tsx

@@ -4,8 +4,7 @@ import { useAppDispatch, useAppSelector } from '@/host/store/hooks';
 import Execution from '@pathFinder/components/controller/execution';
 import Operations from '@pathFinder/components/controller/operations';
 import { getDimensionsFromScreenSize } from '@/apps/path-finder/helpers/grid.helper';
-import Info from '@pathFinder/components/controller/info';
-import Timer from '@pathFinder/components/controller/timer';
+import PathInfo from '@/apps/path-finder/components/controller/path-info';
 import { defaultSpeeds } from '@pathFinder/config';
 import classes from './controller.module.scss';
 
@@ -36,8 +35,7 @@ function Controller() {
   return (
     <section className={classes.controller}>
       <Operations defaultSpeed={defaultSpeed} />
-      <Info />
-      <Timer />
+      <PathInfo />
       <Execution defaultSpeed={defaultSpeed} />
     </section>
   );

src/apps/path-finder/components/controller/timer.tsx → src/apps/path-finder/components/controller/path-info.tsx

@@ -4,8 +4,12 @@ import { useEffect } from 'react';
 import { Status } from '@pathFinder/models/interfaces';
 import classes from './controller.module.scss';
 
-function Timer() {
+function PathInfo() {
   const status = useAppSelector((state) => state.pathFinder.status);
+  const visitedCellCount = useAppSelector(
+    (state) => state.pathFinder.visitedCellCount
+  );
+
   const { time, isRunning, startTimer, stopTimer, resetTimer } = useTimer();
 
   useEffect(() => {
@@ -24,10 +28,17 @@ function Timer() {
   }, [status, startTimer, stopTimer, isRunning, resetTimer]);
 
   return (
-    <p>
-      Time: <span className={classes.time}>{time}</span>
-    </p>
+    <div className={classes.pathInfo}>
+      <p>
+        Visited Cell:{' '}
+        <span className={classes.highlight}>{visitedCellCount}</span>
+      </p>
+
+      <p>
+        Time: <span className={classes.highlight}>{time}</span>
+      </p>
+    </div>
   );
 }
 
-export default Timer;
+export default PathInfo;

src/apps/path-finder/layouts/main.layout.tsx

@@ -2,12 +2,15 @@ import Controller from '@pathFinder/components/controller/controller';
 import Grid from '@pathFinder/components/grid/grid';
 import Navbar from '@/lib/components/navbar/navbar';
 import ThemeIcon from '@/lib/components/theme-icon/theme-icon';
+import CellInfo from '../components/cell-info/cell-info';
 
 function MainLayout() {
   return (
     <>
       <ThemeIcon top={10} right={20} />
-      <Navbar title="Path Finder" />
+      <Navbar title="Path Finder">
+        <CellInfo />
+      </Navbar>
       <Controller />
       <main className="text-center">
         <Grid />

src/apps/sorting-visualizer/models/interfaces.ts

@@ -31,11 +31,6 @@ export interface HeaderProps {
   isCompleted: boolean;
 }
 
-export interface NavbarProps {
-  title: string;
-  menuItems?: string[];
-}
-
 export interface NumberGenProps {
   setInput: React.Dispatch<React.SetStateAction<string>>;
 }

src/lib/components/navbar/navbar.tsx

@@ -1,12 +1,16 @@
 import { Link, NavLink } from 'react-router-dom';
-
-import { NavbarProps } from '@/apps/sorting-visualizer/models/interfaces';
 import classes from './navbar.module.scss';
 import hamIcon from '/icons/ham.svg';
 import { useState } from 'react';
 import { Home } from 'lucide-react';
 
-function Navbar({ title, menuItems }: NavbarProps) {
+export interface Props {
+  title: string;
+  menuItems?: string[];
+  children?: React.ReactNode;
+}
+
+function Navbar({ title, menuItems, children }: Props) {
   const [toggle, setToggle] = useState(false);
 
   return (
@@ -28,6 +32,8 @@ function Navbar({ title, menuItems }: NavbarProps) {
         </a>
       </h1>
 
+      {children}
+
       {menuItems ? (
         <>
           <button onClick={() => setToggle(!toggle)}>