style(frontend): 💄 Add the same on hover effect on project p… (#186)

* style(frontend): 💄 Add the same on hover effect on project page for satellite page and make the whole card clickable. * refactor(frontend): ♻️ Run prettier * style(frontend): 💄 Change the width to the satellite cards
NTNU-SmallSatLab · Apr 2, 2024 · 4f9d81e · 4f9d81e
1 parent 5158e6f
commit 4f9d81e
Showing 1 changed file with 24 additions and 26 deletions.
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
@@ -45,33 +45,31 @@ export default async function Satellites() {
                         previewImage = HOST_URL + previewImage;
                     }
                     return (
-                        <Card key={satellite.id} className="w-1/1.5 md:w-1/3 ">
-                            <CardHeader className="flex flex-col items-center justify-center">
-                                <CardTitle>
-                                    <Link
-                                        href={
-                                            "/satellites/" +
-                                            satellite?.attributes?.name
-                                        }
-                                        className="hover:underline"
-                                    >
+                        <Link
+                            href={"/satellites/" + satellite?.attributes?.name}
+                            className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
+                            key={satellite.id}
+                        >
+                            <Card className="md:w-76 flex h-full w-72 flex-col">
+                                <CardHeader className="flex flex-col items-center justify-center">
+                                    <CardTitle>
                                         {satellite?.attributes?.name}
-                                    </Link>
-                                </CardTitle>
-                            </CardHeader>
-                            <CardContent className="flex flex-col items-center">
-                                <SatelliteStatsTable />
-                                {previewImage && (
-                                    <Image
-                                        src={previewImage}
-                                        alt={previewImage}
-                                        width={200}
-                                        height={0}
-                                        className="margin p-2"
-                                    />
-                                )}
-                            </CardContent>
-                        </Card>
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent className="flex flex-col items-center">
+                                    <SatelliteStatsTable />
+                                    {previewImage && (
+                                        <Image
+                                            src={previewImage}
+                                            alt={previewImage}
+                                            width={200}
+                                            height={0}
+                                            className="margin p-2"
+                                        />
+                                    )}
+                                </CardContent>
+                            </Card>
+                        </Link>
                     );
                 })}
             </div>