128 style satellites overview page (#164)

* feat(frontend): ✨ Make table component for showing satellite stats * feat(frontend): ✨ Add responsive design for the cards and the table --------- Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
NTNU-SmallSatLab · Mar 20, 2024 · 23a59cd · 23a59cd
1 parent 70accdd
commit 23a59cd
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 17 deletions.
diff --git 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
@@ -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>
+    );
+}