update cover image in preview

Author: Roshan Jossy

src/components/feed/StoryPreview.tsx

@@ -1,9 +1,8 @@
 import { graphql, useFragment } from 'react-relay'
 import { StoryPreview_node$key } from '../../queries/__generated__/StoryPreview_node.graphql'
-import Card from '../Card'
-import StoryAbstract from './StoryAbstract'
 import StoryPreviewFooter from './StoryPreviewFooter'
 import UserSnippet from './UserSnippet'
+import { GoKebabVertical } from '@react-icons/all-files/go/GoKebabVertical'
 
 type StoryPreviewProps = {
   story: StoryPreview_node$key
@@ -32,13 +31,16 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
         <img className="cover-image" src={data.thumbnail} alt="" />
       </div>
       <div className="px-4 pb-4">
-        <UserSnippet user={data.createdBy} />
+        <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>
-          <p>{data.abstractContent}</p>
+          <p className="abstract-content">{data.abstractContent}</p>
         </div>
-        <StoryPreviewFooter />
       </div>
+      <StoryPreviewFooter />
       <style jsx>
         {`
           .cover-image {
@@ -47,6 +49,16 @@ const StoryPreview = ({ story }: StoryPreviewProps) => {
             width: 100%;
             object-fit: cover;
           }
+
+          .abstract-content {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            // Addition lines for 2 line or multiline ellipsis
+            display: -webkit-box !important;
+            -webkit-line-clamp: 4;
+            -webkit-box-orient: vertical;
+            white-space: normal;
+          }
         `}
       </style>
     </div>

src/components/feed/StoryPreviewFooter.tsx

@@ -3,7 +3,7 @@ import { RiHeart3Fill } from '@react-icons/all-files/ri/RiHeart3Fill'
 import { RiHeartLine } from '@react-icons/all-files/ri/RiHeartLine'
 export default function StoryPreviewFooter() {
   return (
-    <div className="flex flex-row items-center">
+    <div className="flex flex-row items-center bg-gray-100 dark:bg-dark-500 p-4 rounded-b-lg space-x-2">
       <BiCommentDetail />
       <span className="text-sm"> 10 </span>
       <RiHeart3Fill />

src/components/feed/UserSnippet.tsx

@@ -30,11 +30,11 @@ const UserSnippet = ({ user }: UserSnippetProps) => {
           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">
+        <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 rounded-md text-sm font-bold leading-6">
+          <span className="bg-sky-400/20 text-sky-600 px-2 ml-2 mb-2 rounded-md text-sm font-bold leading-6">
             {data.reputation.value}
           </span>
         </div>