update user snippet contents

Author: Roshan Jossy

src/components/Card.tsx

@@ -9,7 +9,7 @@ export default function Card({
 }) {
   return (
     <div
-      className={`py-4 px-8 bg-white dark:bg-dark-700 rounded-lg ${
+      className={`py-4 px-4 bg-white dark:bg-dark-700 rounded-lg ${
         classes || ''
       }`}
     >

src/components/feed/StoryPreview.tsx

@@ -26,10 +26,10 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
 
   return (
     <>
-      <Card classes="my-8">
+      <Card classes="my-8 flex flex-col">
         <UserSnippet user={data.createdBy} />
-        <div className="prose">
-          <h3>{data.title}</h3>
+        <div className="prose dark:text-gray-100">
+          <h3 className="dark:text-gray-200">{data.title}</h3>
           <p>{data.abstractContent}</p>
         </div>
       </Card>

src/components/feed/UserSnippet.tsx

@@ -13,6 +13,7 @@ const UserSnippet = ({ user }: UserSnippetProps) => {
         avatar
         id
         handle
+        bio
         reputation {
           value
         }
@@ -21,12 +22,24 @@ const UserSnippet = ({ user }: UserSnippetProps) => {
     user
   )
 
-  const hanlde = `@${data.handle}`
-  console.log(hanlde)
   return (
     <div className="flex">
-      <img src={data.avatar} alt={data.handle} className="w-8 h-8 rounded-sm" />
-      <Link href={`/${hanlde}`}> {data.handle} </Link>
+      <img
+        src={data.avatar}
+        alt={`${data.handle}'s avatar`}
+        className="w-12 h-12 rounded-sm"
+      />
+      <div className="flex flex-col mx-2">
+        <div className="flex flex-row">
+          <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 rounded-md text-sm font-bold leading-6">
+            {data.reputation.value}
+          </span>
+        </div>
+        <span className=" text-sm">{data.bio}</span>
+      </div>
     </div>
   )
 }