From f1fcdd1372c2329db37992dbc68d77ffb9e6775b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20Alexander=20Str=C3=B8mseng?=
 <magnus.stromseng@gmail.com>
Date: Wed, 10 Apr 2024 16:00:55 +0200
Subject: [PATCH] 209 add headingstitles to blog  satellite page also add
 common marginspaddin around most pages (#236)

* feat(frontend): :sparkles: padding and pageheader components, add to all layouts

* utilize pageHeader and subtitle

* wip blog posts refactor

* finally fix grid responsiveness

* add blocksrenderer back to blogcard

* blogs styling and refactoring

* fix(frontend): fix key prop warning

* run prettier

* refactor(frontend): :recycle: Refactor code in satellite page and move to satelliteCard component

* refactor(frontend): :recycle: Run prettier

---------

Co-authored-by: Lucas Tran <lucastra@stud.ntnu.no>
---
 frontend/src/app/blog/blogDataCards.tsx       | 59 ++++++------
 frontend/src/app/blog/layout.tsx              |  5 +
 frontend/src/app/blog/page.tsx                | 24 ++++-
 frontend/src/app/projects/layout.tsx          |  5 +
 frontend/src/app/projects/page.tsx            | 17 +++-
 frontend/src/app/satellites/layout.tsx        |  5 +
 frontend/src/app/satellites/page.tsx          | 61 ++++++++----
 frontend/src/components/BlogpageButtons.tsx   | 16 +++-
 frontend/src/components/PageHeader.tsx        | 20 ++++
 frontend/src/components/PagePadding.tsx       | 19 ++++
 frontend/src/components/fullBlogCard.tsx      | 95 ++++++++++---------
 .../components/homeComponents/homeGlobe.tsx   |  3 +-
 frontend/src/components/ui/blogCard.tsx       | 27 +-----
 frontend/src/components/ui/satelliteCard.tsx  | 23 ++---
 14 files changed, 231 insertions(+), 148 deletions(-)
 create mode 100644 frontend/src/app/blog/layout.tsx
 create mode 100644 frontend/src/app/projects/layout.tsx
 create mode 100644 frontend/src/app/satellites/layout.tsx
 create mode 100644 frontend/src/components/PageHeader.tsx
 create mode 100644 frontend/src/components/PagePadding.tsx

diff --git a/frontend/src/app/blog/blogDataCards.tsx b/frontend/src/app/blog/blogDataCards.tsx
index 9b7bebd..c9d38f9 100644
--- a/frontend/src/app/blog/blogDataCards.tsx
+++ b/frontend/src/app/blog/blogDataCards.tsx
@@ -1,6 +1,7 @@
 import FullBlogCard from "@/components/fullBlogCard";
 import BlogpageButtons from "@/components/BlogpageButtons";
 import { BlogPost } from "./page";
+import React from "react";
 
 export default async function BlogDataCards({
     articles,
@@ -16,34 +17,34 @@ export default async function BlogDataCards({
     }
 
     return (
-        <div className="flex w-3/4 flex-row flex-wrap items-center justify-center self-center">
-            {articles.map((article: any) => {
-                return (
-                    <div
-                        key={article.id}
-                        className={
-                            article.firstArticle
-                                ? "flex w-full flex-col items-center justify-center"
-                                : "flex w-1/3 flex-col items-center justify-center"
-                        }
-                    >
-                        <FullBlogCard
-                            key={article.id}
-                            firstArticle={article.firstArticle}
-                            content={article.content}
-                            coverImage={article.coverImage}
-                            datePublished={article.datePublished}
-                            tag={article.tag}
-                            HOST_URL={article.HOST_URL}
-                            authorName={article.authorName}
-                            avatarURL={article.avatarURL}
-                            slug={article.slug}
-                            title={article.title}
-                        />{" "}
-                        {article.firstArticle ? <BlogpageButtons /> : null}
-                    </div>
-                );
-            })}
-        </div>
+        <>
+            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                <BlogpageButtons className="col-span-full" />
+                {/* Only map fist article */}
+                {articles.map((article: BlogPost) => {
+                    if (article.firstArticle) {
+                        return (
+                            <React.Fragment key={article.key}>
+                                <FullBlogCard
+                                    className="col-span-full"
+                                    article={article}
+                                />
+                            </React.Fragment>
+                        );
+                    }
+                })}
+
+                {articles.map((article: BlogPost) => {
+                    if (article.firstArticle) {
+                        return;
+                    }
+                    return (
+                        <React.Fragment key={article.key}>
+                            <FullBlogCard article={article} />
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+        </>
     );
 }
diff --git a/frontend/src/app/blog/layout.tsx b/frontend/src/app/blog/layout.tsx
new file mode 100644
index 0000000..3eab227
--- /dev/null
+++ b/frontend/src/app/blog/layout.tsx
@@ -0,0 +1,5 @@
+import { PagePadding } from "@/components/PagePadding";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PagePadding>{children}</PagePadding>;
+}
diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
index 9b5422b..f09dca9 100644
--- a/frontend/src/app/blog/page.tsx
+++ b/frontend/src/app/blog/page.tsx
@@ -3,6 +3,11 @@ import BlogDataCards from "./blogDataCards";
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import { Enum_Article_Tag } from "@/__generated__/graphql";
 import fetchArticlePages from "@/lib/data/fetchArticleInfo";
+import {
+    PageHeaderAndSubtitle,
+    PageSubtitle,
+    PageHeader,
+} from "@/components/PageHeader";
 
 export interface BlogPost {
     key: string | null | undefined;
@@ -41,10 +46,19 @@ export default async function BlogPage({
     const { articleList, totalArticles } = result;
 
     return (
-        <div className="just flex flex-col content-center justify-center">
-            {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
-            <BlogDataCards articles={articleList} />
-            <BlogPaginator totalArticles={totalArticles} />
-        </div>
+        <>
+            <PageHeaderAndSubtitle>
+                <PageHeader>Blog</PageHeader>
+                <PageSubtitle>
+                    Welcome to the blog! Here you can find all of the articles
+                    we have written.
+                </PageSubtitle>
+            </PageHeaderAndSubtitle>
+            <div className="flex flex-col justify-center">
+                {/* <BlogDataCards articles={articleCache[currentPage]} /> */}
+                <BlogDataCards articles={articleList} />
+                <BlogPaginator totalArticles={totalArticles} />
+            </div>
+        </>
     );
 }
diff --git a/frontend/src/app/projects/layout.tsx b/frontend/src/app/projects/layout.tsx
new file mode 100644
index 0000000..3eab227
--- /dev/null
+++ b/frontend/src/app/projects/layout.tsx
@@ -0,0 +1,5 @@
+import { PagePadding } from "@/components/PagePadding";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PagePadding>{children}</PagePadding>;
+}
diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index 422b108..be85fd6 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -4,6 +4,11 @@ import { getClient } from "@/lib/ApolloClient";
 import Link from "next/link";
 import Image from "next/image";
 import { SlicePreviewText } from "@/components/SlicePreviewText";
+import {
+    PageHeader,
+    PageHeaderAndSubtitle,
+    PageSubtitle,
+} from "@/components/PageHeader";
 import { OuiImage } from "@/components/fullBlogCard";
 const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 
@@ -52,13 +57,15 @@ export default async function ProjectsPage() {
     return (
         <div>
             <div className="flex flex-col items-center justify-center">
-                <h1 className="text-4xl font-extrabold ">Our Projects</h1>
-                <p className="text-sm text-muted-foreground">
-                    Information about our various projects are shown here.
-                </p>
+                <PageHeaderAndSubtitle>
+                    <PageHeader>Our Projects</PageHeader>
+                    <PageSubtitle>
+                        Information about our various projects are shown here.
+                    </PageSubtitle>
+                </PageHeaderAndSubtitle>
             </div>
 
-            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
+            <div className="flex flex-wrap justify-center gap-4 md:justify-start">
                 {graphqlData.data.projects.data.map((project) => {
                     let previewImage =
                         project?.attributes?.previewImage?.data?.attributes
diff --git a/frontend/src/app/satellites/layout.tsx b/frontend/src/app/satellites/layout.tsx
new file mode 100644
index 0000000..3eab227
--- /dev/null
+++ b/frontend/src/app/satellites/layout.tsx
@@ -0,0 +1,5 @@
+import { PagePadding } from "@/components/PagePadding";
+import React from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <PagePadding>{children}</PagePadding>;
+}
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index 0454403..8b342fe 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -1,6 +1,11 @@
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
 import SatelliteCard from "@/components/ui/satelliteCard";
+import {
+    PageHeader,
+    PageHeaderAndSubtitle,
+    PageSubtitle,
+} from "@/components/PageHeader";
 
 const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 const GET_SATELLITES = gql(`
@@ -33,26 +38,42 @@ export default async function Satellites() {
         });
 
         return (
-            <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
-                {graphqlData?.data?.satellites?.data?.map((satellite: any) => {
-                    let previewImage =
-                        satellite?.attributes?.previewImage?.data?.attributes
-                            ?.url;
-                    if (OUTSIDE_STRAPI_URL && previewImage != undefined) {
-                        previewImage = OUTSIDE_STRAPI_URL + previewImage;
-                    }
-                    let satelliteName = satellite?.attributes?.name ?? "";
-                    let missionStatus =
-                        satellite?.attributes?.missionStatus ?? "";
-                    return (
-                        // eslint-disable-next-line react/jsx-key
-                        <SatelliteCard
-                            satelliteName={satelliteName}
-                            missionStatus={missionStatus}
-                            previewImage={previewImage}
-                        ></SatelliteCard>
-                    );
-                })}
+            <div>
+                <PageHeaderAndSubtitle>
+                    <PageHeader>Satellites</PageHeader>
+                    <PageSubtitle>
+                        Theese are all the satellites we have worked on.
+                    </PageSubtitle>
+                </PageHeaderAndSubtitle>
+                <div className="flex flex-wrap justify-center gap-4 md:justify-start">
+                    {graphqlData?.data?.satellites?.data?.map(
+                        (satellite: any) => {
+                            let previewImage =
+                                satellite?.attributes?.previewImage?.data
+                                    ?.attributes?.url;
+                            if (
+                                OUTSIDE_STRAPI_URL &&
+                                previewImage != undefined
+                            ) {
+                                previewImage =
+                                    OUTSIDE_STRAPI_URL + previewImage;
+                            }
+                            let satelliteName =
+                                satellite?.attributes?.name ?? "";
+                            let missionStatus =
+                                satellite?.attributes?.missionStatus ?? "";
+                            return (
+                                // eslint-disable-next-line react/jsx-key
+                                <SatelliteCard
+                                    satelliteName={satelliteName}
+                                    missionStatus={missionStatus}
+                                    previewImage={previewImage}
+                                    satelliteId={satellite.id}
+                                ></SatelliteCard>
+                            );
+                        },
+                    )}
+                </div>
             </div>
         );
     } catch (error) {
diff --git a/frontend/src/components/BlogpageButtons.tsx b/frontend/src/components/BlogpageButtons.tsx
index ddb342d..ca5010d 100644
--- a/frontend/src/components/BlogpageButtons.tsx
+++ b/frontend/src/components/BlogpageButtons.tsx
@@ -2,8 +2,9 @@
 import { useState } from "react";
 import { Button } from "./ui/button";
 import { useRouter, useSearchParams } from "next/navigation";
+import { cn } from "@/lib/utils";
 
-export default function BlogpageButtons() {
+export default function BlogpageButtons({ className }: { className?: string }) {
     const [activeButton, setActiveButton] = useState("All Posts");
     const router = useRouter();
     const page = useSearchParams().get("currentPage");
@@ -18,21 +19,26 @@ export default function BlogpageButtons() {
     };
 
     return (
-        <div className="m-10 flex w-1/3 flex-row items-center justify-center gap-4">
+        <div
+            className={cn(
+                "flex flex-row items-center justify-center gap-4",
+                className,
+            )}
+        >
             <Button
-                className={`w-1/4 min-w-20 border border-white hover:bg-primary ${activeButton === "All Posts" ? "bg-primary" : "bg-transparent"}`}
+                className={`border border-white hover:bg-primary ${activeButton === "All Posts" ? "bg-primary" : "bg-transparent"}`}
                 onClick={() => handleParameterChange("All Posts")}
             >
                 All Posts
             </Button>
             <Button
-                className={`w-1/4 min-w-20 border border-white hover:bg-primary ${activeButton === "Updates" ? "bg-primary" : "bg-transparent"}`}
+                className={`border border-white hover:bg-primary ${activeButton === "Updates" ? "bg-primary" : "bg-transparent"}`}
                 onClick={() => handleParameterChange("Updates")}
             >
                 Updates
             </Button>
             <Button
-                className={`w-1/4 min-w-20 border border-white hover:bg-primary ${activeButton === "News" ? "bg-primary" : "bg-transparent"}`}
+                className={`border border-white hover:bg-primary ${activeButton === "News" ? "bg-primary" : "bg-transparent"}`}
                 onClick={() => handleParameterChange("News")}
             >
                 News
diff --git a/frontend/src/components/PageHeader.tsx b/frontend/src/components/PageHeader.tsx
new file mode 100644
index 0000000..67ccd7d
--- /dev/null
+++ b/frontend/src/components/PageHeader.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+function PageHeader({ children }: { children?: React.ReactNode }) {
+    return <h1 className="text-center text-4xl font-bold">{children}</h1>;
+}
+
+function PageSubtitle({ children }: { children?: React.ReactNode }) {
+    return <h2 className="text-sm text-muted-foreground">{children}</h2>;
+}
+
+// Component that wraps both the header and the subtitle to be used together
+function PageHeaderAndSubtitle({ children }: { children?: React.ReactNode }) {
+    return (
+        <div className="mb-4 flex flex-col items-center justify-center gap-3">
+            {children}
+        </div>
+    );
+}
+
+export { PageHeader, PageSubtitle, PageHeaderAndSubtitle };
diff --git a/frontend/src/components/PagePadding.tsx b/frontend/src/components/PagePadding.tsx
new file mode 100644
index 0000000..d88122e
--- /dev/null
+++ b/frontend/src/components/PagePadding.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+function VerticalPagePadding({ children }: { children: React.ReactNode }) {
+    return <div className="py-8">{children}</div>;
+}
+
+function HorizontalPagePadding({ children }: { children: React.ReactNode }) {
+    return <div className="px-8 md:px-10">{children}</div>;
+}
+
+function PagePadding({ children }: { children: React.ReactNode }) {
+    return (
+        <HorizontalPagePadding>
+            <VerticalPagePadding>{children}</VerticalPagePadding>
+        </HorizontalPagePadding>
+    );
+}
+
+export { VerticalPagePadding, HorizontalPagePadding, PagePadding };
diff --git a/frontend/src/components/fullBlogCard.tsx b/frontend/src/components/fullBlogCard.tsx
index f37b5f2..bf90e6c 100644
--- a/frontend/src/components/fullBlogCard.tsx
+++ b/frontend/src/components/fullBlogCard.tsx
@@ -1,6 +1,7 @@
 import {
     BlogCard,
     BlogCardContent,
+    BlogCardFooter,
     BlogCardHeader,
     BlogCardTitle,
 } from "@/components/ui/blogCard";
@@ -8,6 +9,7 @@ import Link from "next/link";
 import { SlicePreviewText } from "./SlicePreviewText";
 import { BlogPost } from "@/app/blog/page";
 import Image from "next/image";
+import { cn } from "@/lib/utils";
 import { SVGProps } from "react";
 
 export function OuiImage(props: SVGProps<SVGSVGElement>) {
@@ -27,7 +29,13 @@ export function OuiImage(props: SVGProps<SVGSVGElement>) {
     );
 }
 
-export default function FullBlogCard(article: BlogPost) {
+export default function FullBlogCard({
+    article,
+    className,
+}: {
+    article: BlogPost;
+    className?: string;
+}) {
     function formatDate(dateString: string) {
         const date = new Date(dateString);
         const options: Intl.DateTimeFormatOptions = {
@@ -39,55 +47,48 @@ export default function FullBlogCard(article: BlogPost) {
     }
 
     return (
-        <BlogCard
-            className={
-                article.firstArticle
-                    ? "m-3 mt-10 w-full pb-5"
-                    : "m-[1%] mb-5 min-w-80 max-w-[30%] grow pb-5"
-            }
-            key={article.key}
-        >
+        <BlogCard className={cn(className)}>
             <BlogCardHeader>
-                <BlogCardContent>
-                    {article.coverImage ? (
-                        <Image
-                            src={article.coverImage}
-                            alt={article.coverImage}
-                            width={500}
-                            height={0}
-                            className="m-0 aspect-video max-h-[250px] w-full object-cover p-0"
-                        />
-                    ) : (
-                        <div className="m-0 flex aspect-video max-h-[250px] w-full items-center justify-center">
-                            <OuiImage />
-                        </div>
-                    )}
-                    <div className="m-5">
-                        <div className="flex">
-                            <p className="ww-fit rounded-md bg-primary p-2 text-center text-xs text-white">
-                                {article.tag ? article.tag : "General"}
-                            </p>
-                            <p className="w-fit p-2 text-center text-xs text-white">
-                                {formatDate(article.datePublished)}
-                            </p>
-                        </div>
-                        <BlogCardTitle className="my-2">
-                            <Link
-                                className="hover:underline"
-                                href={"/blog/" + article.slug}
-                            >
-                                {article.title}
-                            </Link>
-                        </BlogCardTitle>
-                        <p className="break-words">
-                            {SlicePreviewText(article.content)}
-                        </p>
+                {article.coverImage ? (
+                    <Image
+                        src={article.coverImage}
+                        alt={article.coverImage}
+                        width={500}
+                        height={0}
+                        className="aspect-video max-h-[250px] w-full object-cover"
+                    />
+                ) : (
+                    <div className="flex aspect-video max-h-[250px] w-full items-center justify-center">
+                        <OuiImage />
                     </div>
-                </BlogCardContent>
+                )}
+                <div className="flex gap-2">
+                    <p className="flex items-center rounded-md bg-primary p-2 text-center text-xs text-white">
+                        {article.tag ? article.tag : "General"}
+                    </p>
+                    <p className="flex w-fit items-center text-center text-xs text-white">
+                        {formatDate(article.datePublished)}
+                    </p>
+                </div>
+                <BlogCardTitle>
+                    <Link
+                        className="hover:underline"
+                        href={"/blog/" + article.slug}
+                    >
+                        {article.title}
+                    </Link>
+                </BlogCardTitle>
             </BlogCardHeader>
-            <Link href={"/blog/" + article.slug} className="m-5 text-primary">
-                Read more →
-            </Link>
+            <BlogCardContent>
+                <p className="break-words">
+                    {SlicePreviewText(article.content)}
+                </p>
+            </BlogCardContent>
+            <BlogCardFooter>
+                <Link href={"/blog/" + article.slug} className="text-primary">
+                    Read more →
+                </Link>
+            </BlogCardFooter>
         </BlogCard>
     );
 }
diff --git a/frontend/src/components/homeComponents/homeGlobe.tsx b/frontend/src/components/homeComponents/homeGlobe.tsx
index 99998ff..8192491 100644
--- a/frontend/src/components/homeComponents/homeGlobe.tsx
+++ b/frontend/src/components/homeComponents/homeGlobe.tsx
@@ -25,8 +25,7 @@ export default function SatelliteGlobe() {
             globeRef.current = Globe()(chart.current)
                 .globeImageUrl(
                     "//unpkg.com/three-globe/example/img/earth-blue-marble.jpg",
-                ) /*
-                .backgroundImageUrl(
+                ) /*.backgroundImageUrl(
                     "//unpkg.com/three-globe/example/img/night-sky.png",
                 )*/
                 .objectLat("lat")
diff --git a/frontend/src/components/ui/blogCard.tsx b/frontend/src/components/ui/blogCard.tsx
index c2531bf..f1389dc 100644
--- a/frontend/src/components/ui/blogCard.tsx
+++ b/frontend/src/components/ui/blogCard.tsx
@@ -9,7 +9,7 @@ const BlogCard = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "border border-white bg-background text-card-foreground",
+            "flex flex-col border border-white bg-background p-5 text-card-foreground",
             className,
         )}
         {...props}
@@ -23,7 +23,7 @@ const BlogCardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn("flex flex-col space-y-1.5", className)}
+        className={cn("flex flex-col gap-2", className)}
         {...props}
     />
 ));
@@ -36,7 +36,7 @@ const BlogCardTitle = React.forwardRef<
     <h3
         ref={ref}
         className={cn(
-            "text-2xl font-semibold leading-none tracking-tight",
+            "hyphens-auto break-words text-2xl font-semibold",
             className,
         )}
         {...props}
@@ -44,23 +44,11 @@ const BlogCardTitle = React.forwardRef<
 ));
 BlogCardTitle.displayName = "BlogCardTitle";
 
-const BlogCardDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-    <p
-        ref={ref}
-        className={cn("text-sm text-muted-foreground", className)}
-        {...props}
-    />
-));
-BlogCardDescription.displayName = "BlogCardDescription";
-
 const BlogCardContent = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("pt-0", className)} {...props} />
+    <div ref={ref} className={cn(className)} {...props} />
 ));
 BlogCardContent.displayName = "BlogCardContent";
 
@@ -68,11 +56,7 @@ const BlogCardFooter = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-    <div
-        ref={ref}
-        className={cn("flex items-center p-6 pt-0", className)}
-        {...props}
-    />
+    <div ref={ref} className={cn(className)} {...props} />
 ));
 BlogCardFooter.displayName = "BlogCardFooter";
 
@@ -81,6 +65,5 @@ export {
     BlogCardHeader,
     BlogCardFooter,
     BlogCardTitle,
-    BlogCardDescription,
     BlogCardContent,
 };
diff --git a/frontend/src/components/ui/satelliteCard.tsx b/frontend/src/components/ui/satelliteCard.tsx
index 32a1257..d5cd40b 100644
--- a/frontend/src/components/ui/satelliteCard.tsx
+++ b/frontend/src/components/ui/satelliteCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+import Link from "next/link";
 import Image from "next/image";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SatelliteStatsTable from "@/components/satelliteData/SatelliteStatsTable";
@@ -11,29 +12,25 @@ interface SatelliteCardProps {
     satelliteName: string;
     missionStatus: string;
     previewImage?: string; // Optional
+    satelliteId: Number;
 }
 
 const SatelliteCard: React.FC<SatelliteCardProps> = ({
     satelliteName,
     missionStatus,
     previewImage,
+    satelliteId,
 }) => {
     /*const setSelectedSatellite = useSatelliteStore(
         (state) => state.setSelectedSatellite,
     );*/
 
-    const handleSatelliteCardClick = (satelliteName: string) => () => {
-        //setSelectedSatellite(satelliteName);
-        window.location.href = `/satellites/${encodeURIComponent(satelliteName)}`;
-    };
-
     return (
-        <div
-            onClick={handleSatelliteCardClick(satelliteName)}
-            className="w-1/1.5 m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4 md:w-1/3"
+        <Link
+            href={"/satellites/" + satelliteName}
+            className="w-1/1.5 transition-transform duration-300 ease-in-out hover:scale-105 hover:transform md:w-1/3"
+            key={satelliteId.toString()}
         >
-            {" "}
-            {/* Ensure the link is clickable and accessible */}
             <Card className="flex h-full w-full flex-col">
                 <CardHeader className="flex flex-col items-center justify-center">
                     <CardTitle>{satelliteName}</CardTitle>
@@ -46,9 +43,9 @@ const SatelliteCard: React.FC<SatelliteCardProps> = ({
                     {previewImage ? (
                         <Image
                             src={previewImage}
-                            alt={satelliteName}
+                            alt={previewImage}
                             width={200}
-                            height={200}
+                            height={0}
                             className="margin p-2"
                         />
                     ) : (
@@ -58,7 +55,7 @@ const SatelliteCard: React.FC<SatelliteCardProps> = ({
                     )}
                 </CardContent>
             </Card>
-        </div>
+        </Link>
     );
 };