add cover image and abstract

Author: Roshan Jossy

src/components/Card.tsx

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

src/components/Layout.tsx

@@ -13,7 +13,7 @@ export default function Layout({
   sidebarContentRight,
 }: LayoutProps) {
   return (
-    <div className="mx-auto bg-gray-100 dark:bg-dark-800 min-h-screen">
+    <div className="mx-auto bg-gray-200 dark:bg-dark-800 min-h-screen">
       <Navbar />
       <div className="grid grid-cols-9 gap-10 mt-10 px-60 pt-10">
         {sidebarContentLeft && (

src/components/feed/StoryAbstract.tsx

@@ -27,15 +27,29 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
   )
 
   return (
-    <Card classes="my-8 flex flex-col">
-      <UserSnippet user={data.createdBy} />
-      <div className="prose dark:text-gray-100">
-        <h3 className="dark:text-gray-200">{data.title}</h3>
-        <p>{data.abstractContent}</p>
+    <div className="my-8 flex flex-col bg-white  dark:bg-dark-700 rounded-lg">
+      <div>
+        <img className="cover-image" src={data.thumbnail} alt="" />
       </div>
-      <StoryAbstract abstract={data.abstractContent} />
-      <StoryPreviewFooter />
-    </Card>
+      <div className="px-4 pb-4">
+        <UserSnippet user={data.createdBy} />
+        <div className="prose dark:text-gray-100">
+          <h3 className="dark:text-gray-200">{data.title}</h3>
+          <p>{data.abstractContent}</p>
+        </div>
+        <StoryPreviewFooter />
+      </div>
+      <style jsx>
+        {`
+          .cover-image {
+            border-radius: 0.5rem 0.5rem 0 0;
+            max-height: 10rem;
+            width: 100%;
+            object-fit: cover;
+          }
+        `}
+      </style>
+    </div>
   )
 }
 

src/components/feed/StoryPreview.tsx

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