From e8cc4863fbcfeb5d7b9e0f909bd463a2d00aa942 Mon Sep 17 00:00:00 2001
From: Samantha Kellow <sammii.h@icloud.com>
Date: Fri, 28 Jul 2023 10:31:31 +0100
Subject: [PATCH] refactoring in next components

---
 components/icons/logo.tsx                  | 3 ++-
 components/layout/footer.tsx               | 4 ++--
 components/product/description-content.tsx | 5 +++--
 components/product/sustainability-info.tsx | 5 +++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/icons/logo.tsx b/components/icons/logo.tsx
index d3405f300..416297ad7 100644
--- a/components/icons/logo.tsx
+++ b/components/icons/logo.tsx
@@ -1,6 +1,7 @@
+import Image from "next/image";
 
 export default function LogoIcon(props: React.ComponentProps<'img'>) {
   return (
-    <img src="/logo-square-black.png" alt="scape squared logo" />
+    <Image width="100" height="50" src="/logo-square-black.png" alt="scape squared logo" />
   );
 }
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 1cbf45b01..814726764 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -58,9 +58,9 @@ export default async function Footer() {
           <p>Designed in England</p>
           <p className="md:ml-auto">
             Crafted by{' '}
-            <a href="https://www.instagram.com/sammiisparkle" className="text-black dark:text-white" target="_blank">
+            <Link href="https://www.instagram.com/sammiisparkle" className="text-black dark:text-white" target="_blank">
               Sammii Sparkle
-            </a>
+            </Link>
           </p>
         </div>
       </div>
diff --git a/components/product/description-content.tsx b/components/product/description-content.tsx
index 85091347b..44e84cc1c 100644
--- a/components/product/description-content.tsx
+++ b/components/product/description-content.tsx
@@ -2,6 +2,7 @@ import { SCAPE } from 'constants/brand';
 import { productTypes } from 'constants/item-details';
 import { credentials, credentialsKeys } from 'constants/sustainability';
 import { Product } from 'lib/shopify/types';
+import Link from 'next/link';
 
 export function DescriptionContent({ product }: { product: Product }) {
   const productTypeKeys = Object.keys(productTypes);
@@ -23,10 +24,10 @@ export function DescriptionContent({ product }: { product: Product }) {
   }
 
   const certificationLink = (credType: keyof typeof credentials) => {
-    return <a 
+    return <Link 
     className='text-underline text-xs' 
     href={`#${getCertificationId(credType)}`}
-    > {credentials[credType].title} certified</a>
+    > {credentials[credType].title} certified</Link>
   }
 
   const commonDetailKeys = Object.keys(itemDetails.common)
diff --git a/components/product/sustainability-info.tsx b/components/product/sustainability-info.tsx
index 1bd1fc107..0932542bf 100644
--- a/components/product/sustainability-info.tsx
+++ b/components/product/sustainability-info.tsx
@@ -5,6 +5,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { credentials, credentialsKeys } from "constants/sustainability";
+import Link from "next/link";
 
 
 export function SustainabilityInfo() {
@@ -18,13 +19,13 @@ export function SustainabilityInfo() {
                 <AccordionTrigger className="text-xs py-3">{credentials[credential as keyof typeof credentials].title}</AccordionTrigger>
                 <AccordionContent>
                   "{credentials[credential as keyof typeof credentials].excerpt}" <br /><br/>
-                  <a 
+                  <Link 
                   className="text-bold pt-6" 
                   href={credentials[credential as keyof typeof credentials].link}
                   target="_blank"
                   >
                     Read more
-                  </a>
+                  </Link>
                 </AccordionContent>
               </AccordionItem>
             ))}