move links to parents in story preview and user snippet

Author: Roshanjossey

src/components/feed/StoryPreview.tsx

@@ -33,27 +33,27 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <div className="my-8 mr-2 flex flex-col bg-white  dark:bg-dark-700 rounded-md">
-        <div>
-          {data.thumbnail ? (
-            <img className="cover-image" src={data.thumbnail} alt="" />
-          ) : (
-            <div className="image-placeholder bg-gray-100 dark:bg-dark-500"></div>
-          )}
-        </div>
-        <div className="px-4 pb-4">
-          <div className="flex flex-row justify-between">
-            <UserSnippet user={data.createdBy} />
-            <GoKebabVertical className="mt-4" />
-          </div>
-          <div className="prose dark:text-gray-100">
-            <Link href={`/story/${data.id}___${data.urlSuffix}`}>
-              <a>
+        <Link href={`/story/${data.id}___${data.urlSuffix}`}>
+          <a>
+            <div>
+              {data.thumbnail ? (
+                <img className="cover-image" src={data.thumbnail} alt="" />
+              ) : (
+                <div className="image-placeholder bg-gray-100 dark:bg-dark-500"></div>
+              )}
+            </div>
+            <div className="px-4 pb-4">
+              <div className="flex flex-row justify-between">
+                <UserSnippet user={data.createdBy} />
+                <GoKebabVertical className="mt-4" />
+              </div>
+              <div className="prose dark:text-gray-100">
                 <h3 className="dark:text-gray-200">{data.title}</h3>
-              </a>
-            </Link>
-            <p className="abstract-content">{data.abstractContent}</p>
-          </div>
-        </div>
+                <p className="abstract-content">{data.abstractContent}</p>
+              </div>
+            </div>
+          </a>
+        </Link>
         <StoryPreviewFooter story={data} />
         <style jsx>
           {`

src/components/feed/UserSnippet.tsx

@@ -25,22 +25,24 @@ const UserSnippet = ({ user }: UserSnippetProps) => {
 
   return (
     <div className="flex flex-col">
-      <div className="flex min-h-32">
-        <img
-          src={data.avatar}
-          alt={`${data.handle}'s avatar`}
-          className="w-16 h-16 rounded-full -mt-8 border-4 dark:border-dark-700 bg-white  dark:bg-dark-500"
-        />
-        <div className="flex flex-row mt-2">
-          <Link href={`/@${data.handle}`}>
-            <a className=" font-bold">{`@${data.handle}`}</a>
-          </Link>
-          <span className="bg-sky-400/20 text-sky-600 px-2 ml-2 mb-2 rounded-md text-sm font-bold leading-6">
-            {getCompactNumber(data.reputation.value)}
-          </span>
-        </div>
-      </div>
-      <span className=" text-sm">{data.bio}</span>
+      <Link href={`/@${data.handle}`}>
+        <a className=" font-bold">
+          <div className="flex min-h-32">
+            <img
+              src={data.avatar}
+              alt={`${data.handle}'s avatar`}
+              className="w-16 h-16 rounded-full -mt-8 border-4 dark:border-dark-700 bg-white  dark:bg-dark-500"
+            />
+            <div className="flex flex-row mt-2">
+              {`@${data.handle}`}
+              <span className="bg-sky-400/20 text-sky-600 px-2 ml-2 mb-2 rounded-md text-sm font-bold leading-6">
+                {getCompactNumber(data.reputation.value)}
+              </span>
+            </div>
+          </div>
+          <span className=" text-sm">{data.bio}</span>
+        </a>
+      </Link>
     </div>
   )
 }