Fix/ECO-2473-framework-version-update

components/archive-relative.tsx

@@ -19,20 +19,18 @@ type BlogListProps = {
 }
 
 export default function ArchiveRelative({ blogs }: BlogListProps) {
-  return (
-    <>
-      {blogs?.map((blog, idx) => (
-        <Link href={blog.url} key={idx}>
-          <a>
-            <div>
-              <h4 {...blog.$?.title as {}}>{blog.title}</h4>
-              {typeof blog.body === 'string' && (
-                <div {...blog.$?.body as {}}>{parse(blog.body.slice(0, 80))}</div>
-              )}
-            </div>
-          </a>
-        </Link>
-      ))}
-    </>
-  );
+  return <>
+    {blogs?.map((blog, idx) => (
+      (<Link href={blog.url} key={idx}>
+
+        <div>
+          <h4 {...blog.$?.title as {}}>{blog.title}</h4>
+          {typeof blog.body === 'string' && (
+            <div {...blog.$?.body as {}}>{parse(blog.body.slice(0, 80))}</div>
+          )}
+        </div>
+
+      </Link>)
+    ))}
+  </>;
 }

components/blog-list.tsx

@@ -36,24 +36,24 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) {
   return (
     <div className='blog-list'>
       {bloglist.featured_image && (
-        <Link href={bloglist.url}>
-          <a>
-            <img
-              className='blog-list-img'
-              src={bloglist.featured_image.url}
-              alt='blog img'
-              {...bloglist.featured_image.$?.url as {}}
-            />
-          </a>
-        </Link>
+        (<Link href={bloglist.url}>
+
+          <img
+            className='blog-list-img'
+            src={bloglist.featured_image.url}
+            alt='blog img'
+            {...bloglist.featured_image.$?.url as {}}
+          />
+
+        </Link>)
       )}
       <div className='blog-content'>
         {bloglist.title && (
-          <Link href={bloglist.url}>
-            <a>
-              <h3 {...bloglist.$?.title}>{bloglist.title}</h3>
-            </a>
-          </Link>
+          (<Link href={bloglist.url}>
+
+            <h3 {...bloglist.$?.title}>{bloglist.title}</h3>
+
+          </Link>)
         )}
         <p>
           <strong {...bloglist.$?.date as {}}>
@@ -66,11 +66,11 @@ function BlogList({ bloglist }: { bloglist: BloglistProps }) {
         </p>
         <div {...bloglist.$?.body as {}}>{parse(body)}</div>
         {bloglist.url ? (
-          <Link href={bloglist.url}>
-            <a>
-              <span>{'Read more -->'}</span>
-            </a>
-          </Link>
+          (<Link href={bloglist.url}>
+
+            <span>{'Read more -->'}</span>
+
+          </Link>)
         ) : (
           ''
         )}

components/blog-section.tsx

@@ -48,14 +48,14 @@ export default function BlogSection(props: FeaturedBlogProps) {
           <h2 {...fromBlog.$?.title_h2 as {}}>{fromBlog.title_h2}</h2>
         )}
         {fromBlog.view_articles && (
-          <Link href={fromBlog.view_articles.href}>
-            <a
-              className='btn secondary-btn article-btn'
-              {...fromBlog.view_articles.$?.title}
-            >
-              {fromBlog.view_articles.title}
-            </a>
-          </Link>
+          (<Link
+            href={fromBlog.view_articles.href}
+            className='btn secondary-btn article-btn'
+            {...fromBlog.view_articles.$?.title}>
+
+            {fromBlog.view_articles.title}
+
+          </Link>)
         )}
       </div>
       <div className='home-featured-blogs'>
@@ -75,8 +75,8 @@ export default function BlogSection(props: FeaturedBlogProps) {
                 <div>{parse(blog.body.slice(0, 300))}</div>
               )}
               {blog.url && (
-                <Link href={blog.url} passHref>
-                  <a className='blogpost-readmore'>{'Read More -->'}</a>
+                <Link href={blog.url} passHref className='blogpost-readmore'>
+                  {'Read More -->'}
                 </Link>
               )}
             </div>

components/card-section.tsx

@@ -27,8 +27,8 @@ export default function CardSection({ cards }: CardProps) {
           {card.description && <p {...card.$?.description as {}}>{card.description}</p>}
           <div className='card-cta'>
             {card.call_to_action.title && card.call_to_action.href && (
-              <Link href={card.call_to_action.href}>
-                <a className='btn primary-btn'>{card.call_to_action.title}</a>
+              <Link href={card.call_to_action.href} className='btn primary-btn'>
+                {card.call_to_action.title}
               </Link>
             )}
           </div>

components/footer.tsx

@@ -52,17 +52,17 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie
       <div className='max-width footer-div'>
         <div className='col-quarter'>
           {footerData && footerData.logo ? (
-            <Link href='/'>
-              <a className='logo-tag'>
-                <img
-                  src={footerData.logo.url}
-                  alt={footerData.title}
-                  title={footerData.title}
-                  {...footer.logo.$?.url as {}}
-                  className='logo footer-logo'
-                />
-              </a>
-            </Link>
+            (<Link href='/' className='logo-tag'>
+
+              <img
+                src={footerData.logo.url}
+                alt={footerData.title}
+                title={footerData.title}
+                {...footer.logo.$?.url as {}}
+                className='logo footer-logo'
+              />
+
+            </Link>)
           ) : (
             <Skeleton width={150} />
           )}
@@ -77,7 +77,7 @@ export default function Footer({ footer, entries }: {footer: FooterProps, entrie
                     key={menu.title}
                     {...menu.$?.title}
                   >
-                    <Link href={menu.href}>{menu.title}</Link>
+                    <Link href={menu.href} legacyBehavior>{menu.title}</Link>
                   </li>
                 ))
               ) : (

components/header.tsx

@@ -69,17 +69,17 @@ export default function Header({ header, entries }: {header: HeaderProps, entrie
       <div className='max-width header-div'>
         <div className='wrapper-logo'>
           {headerData ? (
-            <Link href='/'>
-              <a className='logo-tag' title='Contentstack'>
-                <img
-                  className='logo'
-                  src={headerData.logo.url}
-                  alt={headerData.title}
-                  title={headerData.title}
-                  {...headerData.logo.$?.url as {}}
-                />
-              </a>
-            </Link>
+            (<Link href='/' className='logo-tag' title='Contentstack'>
+
+              <img
+                className='logo'
+                src={headerData.logo.url}
+                alt={headerData.title}
+                title={headerData.title}
+                {...headerData.logo.$?.url as {}}
+              />
+
+            </Link>)
           ) : (
             <Skeleton width={150} />
           )}
@@ -100,8 +100,8 @@ export default function Header({ header, entries }: {header: HeaderProps, entrie
                     className='nav-li'
                     {...list.page_reference[0].$?.url as {}}
                   >
-                    <Link href={list.page_reference[0].url}>
-                      <a className={className}>{list.label}</a>
+                    <Link href={list.page_reference[0].url} className={className}>
+                      {list.label}
                     </Link>
                   </li>
                 );

components/hero-banner.tsx

@@ -57,11 +57,14 @@ export default function HeroBanner(props: BannerProps) {
           ''
         )}
         {banner.call_to_action.title && banner.call_to_action.href ? (
-          <Link href={banner?.call_to_action.href}>
-            <a className='btn tertiary-btn' {...banner.call_to_action.$?.title}>
-              {banner?.call_to_action.title}
-            </a>
-          </Link>
+          (<Link
+            href={banner?.call_to_action.href}
+            className='btn tertiary-btn'
+            {...banner.call_to_action.$?.title}>
+
+            {banner?.call_to_action.title}
+
+          </Link>)
         ) : (
           ''
         )}

components/section-bucket.tsx

@@ -63,7 +63,7 @@ export default function SectionBucket({ section }: {section: BucketProps}) {
                 href={
                   bucket.call_to_action.href ? bucket.call_to_action.href : '#'
                 }
-              >
+                legacyBehavior>
                 {`${bucket.call_to_action.title} -->`}
               </Link>
             ) : (

components/section.tsx

@@ -32,14 +32,14 @@ export default function Section({ section }: {section : SectionProps}) {
           <p {...section.$?.description as {}}>{section.description}</p>
         )}
         {section.call_to_action.title && section.call_to_action.href ? (
-          <Link href={section.call_to_action.href}>
-            <a
-              className='btn secondary-btn'
-              {...section.call_to_action.$?.title}
-            >
-              {section.call_to_action.title}
-            </a>
-          </Link>
+          (<Link
+            href={section.call_to_action.href}
+            className='btn secondary-btn'
+            {...section.call_to_action.$?.title}>
+
+            {section.call_to_action.title}
+
+          </Link>)
         ) : (
           ''
         )}