From daaadee79612c48c8b9d3065e45e48662769886f Mon Sep 17 00:00:00 2001
From: Mads Hermansen <119772939+madshermansen@users.noreply.github.com>
Date: Mon, 8 Apr 2024 16:31:19 +0200
Subject: [PATCH] feat(frontend): :sparkles: Add OuiImage component to replace
 missing preview images (#239)

---
 frontend/src/app/projects/page.tsx       |  7 ++++++-
 frontend/src/app/satellites/page.tsx     |  7 ++++++-
 frontend/src/components/fullBlogCard.tsx | 24 +++++++++++++++++++++++-
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
index 008b4a2..3f00e08 100644
--- a/frontend/src/app/projects/page.tsx
+++ b/frontend/src/app/projects/page.tsx
@@ -5,6 +5,7 @@ import { getClient } from "@/lib/ApolloClient";
 import Link from "next/link";
 import Image from "next/image";
 import { SlicePreviewText } from "@/components/SlicePreviewText";
+import { OuiImage } from "@/components/fullBlogCard";
 const HOST_URL = process.env.HOST_URL;
 
 const GET_PROJECTS = gql(`
@@ -77,7 +78,7 @@ export default async function ProjectsPage() {
                                 <CardHeader></CardHeader>
                                 <CardContent>
                                     <div className="h-64">
-                                        {previewImage && (
+                                        {previewImage ? (
                                             <Image
                                                 className="max-h-full max-w-full object-contain"
                                                 src={previewImage}
@@ -85,6 +86,10 @@ export default async function ProjectsPage() {
                                                 width={500}
                                                 height={0}
                                             />
+                                        ) : (
+                                            <div className="m-0 flex aspect-video max-h-full max-w-full items-center justify-center object-contain">
+                                                <OuiImage />
+                                            </div>
                                         )}
                                     </div>
                                     <CardTitle className="mb-2 mt-2 text-xl font-bold">
diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
index f5839cf..92084f1 100644
--- a/frontend/src/app/satellites/page.tsx
+++ b/frontend/src/app/satellites/page.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SatelliteStatsTable from "@/components/satelliteData/SatelliteStatsTable";
 import Image from "next/image";
+import { OuiImage } from "@/components/fullBlogCard";
 
 const HOST_URL = process.env.HOST_URL;
 const GET_SATELLITES = gql(`
@@ -65,7 +66,7 @@ export default async function Satellites() {
                                         satName={satelliteName}
                                         missionStatus={missionStatus}
                                     />
-                                    {previewImage && (
+                                    {previewImage ? (
                                         <Image
                                             src={previewImage}
                                             alt={previewImage}
@@ -73,6 +74,10 @@ export default async function Satellites() {
                                             height={0}
                                             className="margin p-2"
                                         />
+                                    ) : (
+                                        <div className="m-0 flex aspect-video max-h-full max-w-full items-center justify-center object-contain">
+                                            <OuiImage />
+                                        </div>
                                     )}
                                 </CardContent>
                             </Card>
diff --git a/frontend/src/components/fullBlogCard.tsx b/frontend/src/components/fullBlogCard.tsx
index 0558937..f37b5f2 100644
--- a/frontend/src/components/fullBlogCard.tsx
+++ b/frontend/src/components/fullBlogCard.tsx
@@ -8,6 +8,24 @@ import Link from "next/link";
 import { SlicePreviewText } from "./SlicePreviewText";
 import { BlogPost } from "@/app/blog/page";
 import Image from "next/image";
+import { SVGProps } from "react";
+
+export function OuiImage(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={60}
+            height={60}
+            viewBox="0 0 16 16"
+            {...props}
+        >
+            <path
+                fill="white"
+                d="M6 5a2 2 0 1 1-4 0a2 2 0 0 1 4 0m9-4a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm-3.448 6.134l-3.76 2.769a.5.5 0 0 1-.436.077l-.087-.034l-1.713-.87L1 11.8V14h14V9.751zM15 2H1v8.635l4.28-2.558a.5.5 0 0 1 .389-.054l.094.037l1.684.855l3.813-2.807a.5.5 0 0 1 .52-.045l.079.05L15 8.495z"
+            ></path>
+        </svg>
+    );
+}
 
 export default function FullBlogCard(article: BlogPost) {
     function formatDate(dateString: string) {
@@ -31,7 +49,7 @@ export default function FullBlogCard(article: BlogPost) {
         >
             <BlogCardHeader>
                 <BlogCardContent>
-                    {article.coverImage && (
+                    {article.coverImage ? (
                         <Image
                             src={article.coverImage}
                             alt={article.coverImage}
@@ -39,6 +57,10 @@ export default function FullBlogCard(article: BlogPost) {
                             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">