From 21e89f685bb1bdc6c5d31c22bfefdbbe5cc7c4c7 Mon Sep 17 00:00:00 2001
From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com>
Date: Mon, 22 Apr 2024 14:41:13 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20:sparkles:=20Update=20satelli?=
 =?UTF-8?q?te=20page=20layout=20and=20map=20compo=E2=80=A6=20(#312)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(frontend): :sparkles: Update satellite page layout and map component + navbar fix

* feat(frontend): :sparkles: prettier write

* small fixes with styling

* underline noradID

* prettier

---------

Co-authored-by: Lukas <lukas@thrane.name>
---
 .../app/satellites/[satelliteSlug]/page.tsx   | 35 ++++++++++++-------
 frontend/src/components/2dmap/Map2d.tsx       | 14 ++++----
 frontend/src/components/Navbar.tsx            |  2 +-
 .../src/components/ui/launchDateCountDown.tsx |  9 +++--
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
index a1597fc..344cf8b 100644
--- a/frontend/src/app/satellites/[satelliteSlug]/page.tsx
+++ b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -52,7 +52,7 @@ export default async function SatelliteInfoPage({
 
     return (
         <>
-            <div className="flex flex-col items-center ">
+            <div className="flex flex-col items-center">
                 <PageHeaderAndSubtitle>
                     <PageHeader>{satelliteInfo.name}</PageHeader>
                     <PageSubtitle>
@@ -62,22 +62,24 @@ export default async function SatelliteInfoPage({
                     </PageSubtitle>
                 </PageHeaderAndSubtitle>
 
-                {satelliteInfo.launchDate ? (
-                    <div className="mt-6 w-full">
-                        <LaunchDateCountDown
-                            launchDateString={satelliteInfo.launchDate}
-                        ></LaunchDateCountDown>
-                    </div>
-                ) : null}
                 {/* Container for satname, stats and sat image */}
                 {satelliteInfo.noradId ? (
                     <div className="flex w-full flex-col border-2 border-gray-600 xl:flex-row">
                         {/* Stats Container */}
                         <div className="z-10 flex w-full flex-col border-gray-600 xl:border-r-2">
                             <div className="border-b border-gray-600 bg-black p-5">
-                                {satelliteInfo.noradId
-                                    ? "NORAD ID: " + satelliteInfo.noradId
-                                    : null}
+                                {satelliteInfo.noradId ? (
+                                    <div className="flex flex-row">
+                                        <p>NORAD ID: </p>
+                                        <a
+                                            href={`https://www.n2yo.com/satellite/?s=${satelliteInfo.noradId}`}
+                                            target="_blank"
+                                            className="ml-2 underline"
+                                        >
+                                            {satelliteInfo.noradId}
+                                        </a>
+                                    </div>
+                                ) : null}
                                 <p className="text-gray-400">
                                     {satelliteInfo.massKg
                                         ? "Mass: " +
@@ -115,8 +117,17 @@ export default async function SatelliteInfoPage({
                     </div>
                 ) : null}
 
+                {/* Container for launch date */}
+                {satelliteInfo.launchDate ? (
+                    <div className="w-full">
+                        <LaunchDateCountDown
+                            launchDateString={satelliteInfo.launchDate}
+                        ></LaunchDateCountDown>
+                    </div>
+                ) : null}
+
                 {/* Container for body content */}
-                <div className="mt-6">
+                <div className="mt-6 px-4 sm:px-0">
                     <BlockRendererClient content={satelliteInfo.content} />
                 </div>
             </div>
diff --git a/frontend/src/components/2dmap/Map2d.tsx b/frontend/src/components/2dmap/Map2d.tsx
index a4e1854..aba8cf8 100644
--- a/frontend/src/components/2dmap/Map2d.tsx
+++ b/frontend/src/components/2dmap/Map2d.tsx
@@ -8,7 +8,7 @@ import {
     predictFuturePositions,
 } from "@/lib/convertSatrec";
 
-const updateInterval = 50;
+const updateInterval = 100;
 
 export default function Map2d({ satName }: { satName: string }) {
     const { satelliteData } = useSatelliteStore();
@@ -94,9 +94,9 @@ export default function Map2d({ satName }: { satName: string }) {
 
     return (
         <div ref={containerRef} className="w-full">
-            <div className="flex items-center justify-between bg-black px-6 py-4">
-                <h1 className="text-lg font-semibold text-white">
-                    Current and Predicted Satellite Position
+            <div className="flex flex-col items-center justify-between bg-black px-6 py-4 md:flex-row">
+                <h1 className="text-center text-lg font-semibold text-white md:text-left">
+                    Satellite Position
                 </h1>
                 <div className="flex flex-col items-end">
                     <input
@@ -106,11 +106,11 @@ export default function Map2d({ satName }: { satName: string }) {
                         step="60"
                         value={inputValue}
                         onChange={handleSliderChange}
-                        className="rounded-lg bg-gray-200 py-2 text-black focus:outline-none focus:ring"
+                        className="w-full rounded-lg bg-gray-200 py-2 text-black focus:outline-none focus:ring"
                     />
                     <p className="mt-2 font-thin">
-                        Positions {projectionAmount} minutes into the{" "}
-                        {projectionAmount >= 0 ? "future" : "past"}
+                        Projected positions {projectionAmount / 60} hours into
+                        the {projectionAmount >= 0 ? "future" : "past"}
                     </p>
                 </div>
             </div>
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index c52e5cd..74ddf09 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -122,7 +122,7 @@ export function CodiconGithubProject(props: SVGProps<SVGSVGElement>) {
 export default function Navbar() {
     const pathname = usePathname();
     const getButtonVariant = (path: string) => {
-        if (path === pathname) {
+        if (pathname.includes(path)) {
             return;
         }
         return "ghost";
diff --git a/frontend/src/components/ui/launchDateCountDown.tsx b/frontend/src/components/ui/launchDateCountDown.tsx
index 84bf812..26a1a7f 100644
--- a/frontend/src/components/ui/launchDateCountDown.tsx
+++ b/frontend/src/components/ui/launchDateCountDown.tsx
@@ -1,5 +1,4 @@
-"use client"; // This directive marks the component for client-side execution
-
+"use client";
 import React, { useState, useEffect } from "react";
 
 type LaunchDateCountDownProps = {
@@ -62,11 +61,11 @@ const LaunchDateCountDown: React.FC<LaunchDateCountDownProps> = ({
                 )}
             </div>
 
-            <div className="flex justify-center pt-3">
-                <hr className="w-32 self-center border-white"></hr>
+            <div className="mt-8 flex justify-center">
+                <hr className="w-full max-w-[350px] self-center border-white"></hr>
             </div>
 
-            <div className="pt-5">
+            <div className="mt-4">
                 <div className="rounded-lg p-4 text-center text-4xl tracking-widest text-white shadow-md">
                     {displayTime.length > 0 && (
                         <div className="flex justify-center">