refactor(Cooldown): Component for cooldown

src/components/dashboard/ship-details/ShipDetails.tsx

@@ -1,15 +1,16 @@
-import {FC} from 'react';
-import {shipNavStatusTransform} from '../../../utils/ship/shipNavStatusTransform.tsx';
-import {WaypointInfo} from './waypoint-info/WaypointInfo.tsx';
-import {useShip} from '../../../hooks/ship/useShip.ts';
-import {Cargo} from './cargo/Cargo.tsx';
-import {Fuel} from './fuel/Fuel.tsx';
-import {Waypoints} from './waypoints/Waypoints.tsx';
+import { FC } from 'react';
+import { shipNavStatusTransform } from '../../../utils/ship/shipNavStatusTransform.tsx';
+import { WaypointInfo } from './waypoint-info/WaypointInfo.tsx';
+import { useShip } from '../../../hooks/ship/useShip.ts';
+import { Cargo } from './cargo/Cargo.tsx';
+import { Fuel } from './fuel/Fuel.tsx';
+import { Waypoints } from './waypoints/Waypoints.tsx';
 import './ship-details.css';
-import {Marketplace} from './marketplace/Marketplace.tsx';
-import {Shipyard} from './shipyard/Shipyard.tsx';
-import {PreviousWaypoint} from './previous-waypoint/PreviousWaypoint.tsx';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { Marketplace } from './marketplace/Marketplace.tsx';
+import { Shipyard } from './shipyard/Shipyard.tsx';
+import { PreviousWaypoint } from './previous-waypoint/PreviousWaypoint.tsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Cooldown } from './cooldown/Cooldown.tsx';
 
 export const ShipDetails: FC = () => {
 
@@ -26,28 +27,29 @@ export const ShipDetails: FC = () => {
     return (
         <section className="shipDetails__layout">
             <header className="tab vertical-flex-layout">
-                <div className="flex">
-                    <h2 className="title-3xl">{shipContext.ship?.symbol} - Cooldown {shipContext.cooldown}s</h2>
+                <div className="flex justify-between items-center">
+                    <h2 className="title-3xl">{shipContext.ship?.symbol}</h2>
+                    <Cooldown />
                 </div>
                 <div className="flex items-center">
                     {shipNavStatusTransform(shipContext.nav)}
                     {shipContext.nav?.status === 'IN_TRANSIT' &&
                         <p>
-                            <FontAwesomeIcon icon="angles-right"/>
+                            <FontAwesomeIcon icon="angles-right" />
                             in transit ({shipContext.arrivalTime}s)
                         </p>}
                     {shipContext.nav?.status !== 'IN_TRANSIT' &&
                         <button className="button" onClick={toggleNavStatus}>{getOppositeNavStatus()}</button>}
                 </div>
                 <p>Flight mode: {shipContext.nav?.flightMode}</p>
-                <Fuel ship={shipContext.ship} fuel={shipContext.fuel}/>
+                <Fuel ship={shipContext.ship} fuel={shipContext.fuel} />
             </header>
-            <WaypointInfo/>
-            {(shipContext.ship?.cargo.capacity ?? 0) > 0 && <Cargo/>}
-            <PreviousWaypoint/>
-            <Waypoints/>
-            {shipContext.marketplace && <Marketplace/>}
-            {shipContext.shipyard && <Shipyard/>}
+            <WaypointInfo />
+            {(shipContext.ship?.cargo.capacity ?? 0) > 0 && <Cargo />}
+            <PreviousWaypoint />
+            <Waypoints />
+            {shipContext.marketplace && <Marketplace />}
+            {shipContext.shipyard && <Shipyard />}
         </section>
     );
 };

src/components/dashboard/ship-details/cooldown/Cooldown.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { useShip } from "../../../../hooks/ship/useShip";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import './cooldown.css';
+interface CooldownProps { };
+
+export const Cooldown: FC<CooldownProps> = () => {
+
+    const shipContext = useShip();
+
+    return (
+        <span>
+            <FontAwesomeIcon icon="clock" className="yellow-color mr-3" />{shipContext.cooldown}s
+        </span>
+    );
+}

src/components/dashboard/ship-details/cooldown/cooldown.css

@@ -0,0 +1,3 @@
+.yellow-color {
+    color: var(--color-primary);
+}

src/main.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import App from './App.tsx';
 import Auth from './components/auth/root/Auth.tsx';
-import {Dashboard} from './components/dashboard/root/Dashboard.tsx';
-import {Ships} from './components/dashboard/ships/Ships.tsx';
-import {ShipDetails} from './components/dashboard/ship-details/ShipDetails.tsx';
-import {library} from '@fortawesome/fontawesome-svg-core';
+import { Dashboard } from './components/dashboard/root/Dashboard.tsx';
+import { Ships } from './components/dashboard/ships/Ships.tsx';
+import { ShipDetails } from './components/dashboard/ship-details/ShipDetails.tsx';
+import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faAnchor,
     faAnglesRight,
     faArrowRightFromBracket,
-    faChartSimple, faCoins, faGasPump, faLocationDot,
+    faChartSimple, faClock, faCoins, faGasPump, faLocationDot,
     faRocket, faRotateRight, faSatellite
 } from '@fortawesome/free-solid-svg-icons';
-import {AuthContextProvider} from './providers/auth/AuthContextProvider.tsx';
-import {ShipContextProvider} from './providers/ship/ShipContextProvider.tsx';
+import { AuthContextProvider } from './providers/auth/AuthContextProvider.tsx';
+import { ShipContextProvider } from './providers/ship/ShipContextProvider.tsx';
 
 // Init icons
-library.add(faRocket, faChartSimple, faArrowRightFromBracket, faAnchor, faAnglesRight, faSatellite, faCoins, faGasPump, faRotateRight, faLocationDot);
+library.add(faRocket, faChartSimple, faArrowRightFromBracket, faAnchor, faAnglesRight, faSatellite, faCoins, faGasPump, faRotateRight, faLocationDot, faClock);
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <BrowserRouter>
             <AuthContextProvider>
                 <Routes>
-                    <Route path="login" element={<Auth/>}></Route>
-                    <Route path="/" element={<App/>}>
-                        <Route path="/dashboard" element={<Dashboard/>}></Route>
-                        <Route path="/ships" element={<Ships/>}></Route>
+                    <Route path="login" element={<Auth />}></Route>
+                    <Route path="/" element={<App />}>
+                        <Route path="/dashboard" element={<Dashboard />}></Route>
+                        <Route path="/ships" element={<Ships />}></Route>
                         <Route path="/ships/:shipId" element={
                             <ShipContextProvider>
                                 <ShipDetails></ShipDetails>

src/styles/flex.css

@@ -11,6 +11,10 @@
     justify-content: center;
 }
 
+.justify-between {
+    justify-content: space-between;
+}
+
 .wrap {
     flex-wrap: wrap;
 }