Fix: Various HTML hydration / nesting tag errors

src/components/ActiveTeams.tsx

@@ -21,22 +21,22 @@ export default function ActiveTeams({ teams }: Props) {
       </p>
       <div className="flex flex-col gap-4 mt-4">
         {teams.map((team) => (
-          <Link key={team.slug} href={`/${team.slug}`}>
-            <div className="flex items-center gap-2">
+          <div key={team.slug}>
+            <span className="flex items-center gap-2">
               <TeamAvatar team={team} />
-              <div className="flex flex-col">
+              <span className="flex flex-col">
                 <span className="font-semibold">{team?.name}</span>
-                <a
+                <Link
                   href={`/${team.slug}`}
                   className="hover:text-violet-600 text-xs text-slate-500"
                   title={` Browse all digests of ${team.name}`}
                   rel="noreferrer"
                 >
                   Browse all digests
-                </a>
-              </div>
-            </div>
-          </Link>
+                </Link>
+              </span>
+            </span>
+          </div>
         ))}
       </div>
     </div>

src/components/PopularTags.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import Tag, { ITag } from './Tag';
-import Link from 'next/link';
 import { routes } from '@/core/constants';
+import Link from 'next/link';
+import Tag, { ITag } from './Tag';
 
 interface Props {
   tags: ITag[];
@@ -26,7 +25,7 @@ export default function PopularTags({ tags, currentTag }: Props) {
                 isActive ? routes.DISCOVER : routes.TAG.replace(':slug', slug)
               }
             >
-              <div className="flex flex-col items-start gap-&">
+              <span className="flex flex-col items-start gap-&">
                 <Tag
                   tag={{
                     id,
@@ -37,7 +36,7 @@ export default function PopularTags({ tags, currentTag }: Props) {
                   size="default"
                   active={currentTag?.id === id}
                 />
-              </div>
+              </span>
             </Link>
           );
         })}

src/components/home/HomeOpenSource.tsx

@@ -19,8 +19,8 @@ const HomeOpenSource = () => {
           className="h-6 w-6 fill-white"
         >
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"
           ></path>
         </svg>

src/components/layout/Logo.tsx

@@ -4,14 +4,14 @@ import BrandIcon from './BrandIcon';
 
 const Logo = (props: { className?: string; isWhite?: boolean }) => {
   return (
-    <div className="flex items-center cursor-pointer gap-2">
+    <span className="flex items-center cursor-pointer gap-2">
       <BrandIcon fill={props.isWhite ? 'white' : 'black'} />
       <span
         className={clsx(`text-xl font-[800] text-gray-900`, props.className)}
       >
         digest.club
       </span>
-    </div>
+    </span>
   );
 };
 

src/components/teams/PublicDigestCard.tsx

@@ -1,10 +1,10 @@
+import { DiscoveryDigest } from '@/services/database/digest';
 import { formatDate } from '@/utils/date';
 import { generateDigestOGUrl } from '@/utils/open-graph-url';
 import { Team } from '@prisma/client';
 import Link from 'next/link';
 import BookmarkCountBadge from './BookmarkCountBadge';
 import TeamAvatar from './TeamAvatar';
-import { DiscoveryDigest } from '@/services/database/digest';
 
 interface Props {
   digest: DiscoveryDigest;
@@ -17,11 +17,12 @@ const PublicDigestCard = ({ digest, showTeam, team }: Props) => {
   const url = new URL(generateDigestOGUrl(digest.slug));
 
   return (
-    <Link
-      href={`/${team.slug}/${digest.slug}`}
-      className="overflow-hidden flex cursor-pointer p-2"
-      rel="noopener noreferrer"
-    >
+    <div className="overflow-hidden flex  p-2 relative">
+      <Link
+        href={`/${team.slug}/${digest.slug}`}
+        rel="noopener noreferrer"
+        className="inset-0 absolute z-10 cursor-pointer"
+      />
       <article className="flex flex-col items-start w-full">
         <div className="relative w-full aspect-[16/9] rounded-2xl bg-gray-100 sm:aspect-[2/1] lg:aspect-[3/2] overflow-hidden">
           {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -61,7 +62,7 @@ const PublicDigestCard = ({ digest, showTeam, team }: Props) => {
           </div>
         </div>
       </article>
-    </Link>
+    </div>
   );
 };
 

src/components/teams/PublicDigestListItem.tsx

@@ -1,11 +1,11 @@
+import { DiscoveryDigest } from '@/services/database/digest';
 import { formatDate } from '@/utils/date';
 import { generateDigestOGUrl } from '@/utils/open-graph-url';
 import { Team } from '@prisma/client';
 import Link from 'next/link';
 import BookmarkImage from '../bookmark/BookmarkImage';
 import BookmarkCountBadge from './BookmarkCountBadge';
 import TeamAvatar from './TeamAvatar';
-import { DiscoveryDigest } from '@/services/database/digest';
 
 interface Props {
   digest: DiscoveryDigest;
@@ -18,19 +18,22 @@ const PublicDigestListItem = ({ digest, showTeam, team }: Props) => {
   const url = new URL(generateDigestOGUrl(digest.slug));
 
   return (
-    <Link
-      href={`/${team.slug}/${digest.slug}`}
-      className="overflow-hidden flex cursor-pointer"
-      rel="noopener noreferrer"
-    >
+    <div className="overflow-hidden flex relative ">
+      <Link
+        href={`/${team.slug}/${digest.slug}`}
+        rel="noopener noreferrer"
+        className="inset-0 absolute z-20 cursor-pointer"
+      />
       <article className="flex flex-col items-start w-full bg-white py-6 px-6 border border-gray-200 rounded-md">
         {showTeam && (
           <div className="flex items-center gap-x-1 text-xs">
-            <Link href={`/${team.slug}`}>
-              <div className="flex items-center justify-center gap-2">
+            <Link href={`/${team.slug}`} className="relative z-30 group">
+              <span className="flex items-center justify-center gap-2">
                 <TeamAvatar team={team} />
-                <span>{team?.name}</span>
-              </div>
+                <span className="group-hover:text-violet-700">
+                  {team?.name}
+                </span>
+              </span>
             </Link>
           </div>
         )}
@@ -59,7 +62,7 @@ const PublicDigestListItem = ({ digest, showTeam, team }: Props) => {
           ))}
         </div>
       </article>
-    </Link>
+    </div>
   );
 };