add components for story abstract and preview footer

Author: Roshan Jossy

src/components/feed/StoryAbstract.tsx

@@ -0,0 +1,7 @@
+type StoryAbstractProps = {
+  abstract: string
+}
+
+export default function StoryAbstract({ abstract }: StoryAbstractProps) {
+  return <div>{abstract}</div>
+}

src/components/feed/StoryPreview.tsx

@@ -1,6 +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'
 
 type StoryPreviewProps = {
@@ -25,15 +27,15 @@ 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>
-      </Card>
-    </>
+    <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>
+      <StoryAbstract abstract={data.abstractContent} />
+      <StoryPreviewFooter />
+    </Card>
   )
 }
 

src/components/feed/StoryPreviewFooter.tsx

@@ -0,0 +1,13 @@
+import { BiCommentDetail } from '@react-icons/all-files/bi/BiCommentDetail'
+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">
+      <BiCommentDetail />
+      <span className="text-sm"> 10 </span>
+      <RiHeart3Fill />
+      <RiHeartLine />
+    </div>
+  )
+}

src/components/feed/UserSnippet.tsx

@@ -27,7 +27,7 @@ const UserSnippet = ({ user }: UserSnippetProps) => {
       <img
         src={data.avatar}
         alt={`${data.handle}'s avatar`}
-        className="w-12 h-12 rounded-sm"
+        className="w-12 h-12 rounded-md"
       />
       <div className="flex flex-col mx-2">
         <div className="flex flex-row">