From 23a59cd8ed334d7deca86bc21cbb7dc266fde4a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Gr=C3=B8tan=20Gregusson?=
 <55840686+Jakobgg1243@users.noreply.github.com>
Date: Wed, 20 Mar 2024 17:21:22 +0100
Subject: [PATCH] 128 style satellites overview page (#164)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(frontend): :sparkles: Make table component for showing satellite stats

* feat(frontend): :sparkles: Add responsive design for the cards and the table

---------

Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
---
 frontend/src/app/satellites/page.tsx          | 23 +++-------
 .../src/components/ui/satelliteStatsTable.tsx | 44 +++++++++++++++++++
 2 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/ui/satelliteStatsTable.tsx

diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index 360fa4f..01809c0 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -2,13 +2,8 @@ export const runtime = "edge";
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
 import Link from "next/link";
-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SatelliteStatsTable from "@/components/ui/satelliteStatsTable";
 import Image from "next/image";
 const HOST_URL = process.env.HOST_URL;
 const GET_SATELLITES = gql(`
@@ -40,7 +35,7 @@ export default async function Satellites() {
         });
 
         return (
-            <div className="grid grid-cols-3 gap-4">
+            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
                 {graphqlData?.data?.satellites?.data?.map((satellite) => {
                     let previewImage =
                         satellite?.attributes?.previewImage?.data?.attributes
@@ -49,7 +44,7 @@ export default async function Satellites() {
                         previewImage = HOST_URL + previewImage;
                     }
                     return (
-                        <Card key={satellite.id}>
+                        <Card key={satellite.id} className="w-1/1.5 md:w-1/3 ">
                             <CardHeader className="flex flex-col items-center justify-center">
                                 <CardTitle>
                                     <Link
@@ -64,23 +59,17 @@ export default async function Satellites() {
                                 </CardTitle>
                             </CardHeader>
                             <CardContent className="flex flex-col items-center">
-                                <div className="flex flex-row gap-1">
-                                    <h1>Altitude: {"1234"}km</h1>
-                                    <h1>Speed: {"1223"}km/s</h1>
-                                    <h1>Latitude: {"24.65"}°</h1>
-                                    <h1>Longitude: {"26.12"}°</h1>
-                                </div>
-
+                                <SatelliteStatsTable />
                                 {previewImage && (
                                     <Image
                                         src={previewImage}
                                         alt={previewImage}
                                         width={200}
                                         height={0}
+                                        className="margin p-2"
                                     />
                                 )}
                             </CardContent>
-                            <CardFooter></CardFooter>
                         </Card>
                     );
                 })}
diff --git a/frontend/src/components/ui/satelliteStatsTable.tsx b/frontend/src/components/ui/satelliteStatsTable.tsx
new file mode 100644
index 0000000..51fe3d4
--- /dev/null
+++ b/frontend/src/components/ui/satelliteStatsTable.tsx
@@ -0,0 +1,44 @@
+export const runtime = "edge";
+
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+
+export default function satelliteStatsTable() {
+    return (
+        <Table className="mx-auto w-1/2 border-collapse border">
+            <TableBody>
+                <TableRow>
+                    <TableCell className="text-left" colSpan={2}>
+                        <p>{"In Orbit"}</p>
+                        <p className="">{"Mission Status"}</p>
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell className="w-1/2 border p-2">
+                        <p>{134237 + " Km/h"}</p>
+                        <p className="">{"Speed"}</p>
+                    </TableCell>
+                    <TableCell className="border p-2">
+                        <p>{14624 + " Moh"}</p>
+                        <p className="">{"Altitude"}</p>
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell className="border p-2">
+                        <p>{62.7969 + "° N"}</p>
+                        <p className="">{"Latitude"}</p>
+                    </TableCell>
+                    <TableCell className="border p-2">
+                        <p>{9.7531 + "° E"}</p>
+                        <p className="">{"Longitude"}</p>
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell className="text-left" colSpan={2}>
+                        <p className="text-m">{"Norway"}</p>
+                        <p>{"Above Country"}</p>
+                    </TableCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    );
+}