From b95948d8f0dd4ffe574861a445c0a44626d74a80 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:37:40 +0200
Subject: [PATCH] change avatar to use nextjs image url

---
 frontend/src/app/blog/[articleSlug]/page.tsx |  5 ++-
 frontend/src/components/AvatarImageFix.tsx   | 19 +++++++++
 frontend/src/components/ContactCard.tsx      | 45 --------------------
 3 files changed, 22 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/AvatarImageFix.tsx
 delete mode 100644 frontend/src/components/ContactCard.tsx

diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx
index de2807a..f08bcab 100644
--- a/frontend/src/app/blog/[articleSlug]/page.tsx
+++ b/frontend/src/app/blog/[articleSlug]/page.tsx
@@ -1,9 +1,10 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import BlockRendererClient from "@/components/BlockRendererClient";
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
+import { AvatarImageFix } from "@/components/AvatarImageFix";
 import ShareButtons from "@/components/ShareButtons";
 
 const STRAPI_URL = process.env.STRAPI_URL;
@@ -91,7 +92,7 @@ export default async function Page({
                 <div className="flex flex-1 justify-start gap-1">
                     {avatarURL && (
                         <Avatar className="">
-                            <AvatarImage src={avatarURL} />
+                            <AvatarImageFix src={avatarURL} />
                             <AvatarFallback>
                                 {// Get initials from author name
                                 authorName
diff --git a/frontend/src/components/AvatarImageFix.tsx b/frontend/src/components/AvatarImageFix.tsx
new file mode 100644
index 0000000..fcfe3ce
--- /dev/null
+++ b/frontend/src/components/AvatarImageFix.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/lib/utils";
+const STRAPI_URL = process.env.STRAPI_URL;
+
+const AvatarImageFix = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, src, ...props }, ref) => (
+    <AvatarPrimitive.Image
+        ref={ref}
+        className={cn("aspect-square h-full w-full", className)}
+        src={STRAPI_URL + "_next/image?url=" + src + "&w=100&q=100"}
+        {...props}
+    />
+));
+AvatarImageFix.displayName = "AvatarImageFix";
+
+export { AvatarImageFix };
diff --git a/frontend/src/components/ContactCard.tsx b/frontend/src/components/ContactCard.tsx
deleted file mode 100644
index 1a7e4b1..0000000
--- a/frontend/src/components/ContactCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react";
-import { ExternalLink } from "./ExternalLink";
-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import Helpers from "@/lib/helpers";
-import { Label } from "@/components/ui/label";
-
-type ContactCardProps = {
-    name?: string;
-    role: string | null | undefined;
-    imageUrl?: string;
-    externalUrl: string;
-};
-
-export function ContactCard({
-    name = "",
-    role,
-    imageUrl,
-    externalUrl,
-}: ContactCardProps) {
-    return (
-        <Card className="m-2 w-[350px]">
-            <CardHeader>
-                <Avatar>
-                    <AvatarImage src={imageUrl} alt={name} />
-                    <AvatarFallback>
-                        {Helpers.fullNameToInitials(name)}
-                    </AvatarFallback>
-                </Avatar>
-                <CardTitle>{name}</CardTitle>
-                <Label>{role}</Label>
-            </CardHeader>
-            <CardContent>
-                <ExternalLink href={externalUrl}>NTNU</ExternalLink>
-            </CardContent>
-            <CardFooter className="flex justify-between"></CardFooter>
-        </Card>
-    );
-}