feat: built stories component in profile

src/features/Profiles/pages/ProfilePage/ProfilePage.tsx

@@ -6,6 +6,7 @@ import AboutCard from "./AboutCard/AboutCard"
 import { Helmet } from 'react-helmet'
 import { useAppSelector } from 'src/utils/hooks';
 import styles from './styles.module.scss'
+import StoriesCard from "./StoriesCard/StoriesCard"
 
 export default function ProfilePage() {
 
@@ -39,8 +40,9 @@ export default function ProfilePage() {
             <div className={`page-container ${styles.grid}`}
             >
                 <aside></aside>
-                <main className="">
+                <main className="flex flex-col gap-24">
                     <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
+                    <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
                 </main>
                 <aside></aside>
             </div>

src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+import StoriesCard from './StoriesCard';
+
+export default {
+    title: 'Profiles/Profile Page/Stories Card',
+    component: StoriesCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+
+} as ComponentMeta<typeof StoriesCard>;
+
+
+const Template: ComponentStory<typeof StoriesCard> = (args) => <StoriesCard {...args} ></StoriesCard>
+
+export const Default = Template.bind({});
+Default.args = {
+    stories: MOCK_DATA['posts'].stories
+}
+
+export const Empty = Template.bind({});
+Empty.args = {
+    stories: [],
+}
+
+export const EmptyOwner = Template.bind({});
+EmptyOwner.args = {
+    stories: [],
+    isOwner: true
+}

src/features/Profiles/pages/ProfilePage/StoriesCard/StoriesCard.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import Badge from 'src/Components/Badge/Badge'
+import Button from 'src/Components/Button/Button'
+import { Story } from 'src/features/Posts/types'
+import { getDateDifference } from 'src/utils/helperFunctions'
+import { Tag } from 'src/utils/interfaces'
+import { createRoute } from 'src/utils/routing'
+
+interface Props {
+    isOwner?: boolean;
+    stories: Array<
+        Pick<Story,
+            | 'id'
+            | 'title'
+            | 'createdAt'
+        >
+        &
+        {
+            tags: Array<Pick<Tag, 'id' | 'icon' | 'title'>>
+        }
+    >
+}
+
+export default function StoriesCard({ stories, isOwner }: Props) {
+    return (
+        <div className="rounded-16 bg-white border-2 border-gray-200 p-24">
+            <p className="text-body2 font-bold">Stories ({stories.length})</p>
+            {stories.length > 0 &&
+                <ul className="">
+                    {stories.map(story =>
+                        <li key={story.id} className='py-24 border-b-[1px] border-gray-200 last-of-type:border-b-0  ' >
+                            <Link
+                                className="hover:underline text-body3 font-medium"
+                                role={'button'}
+                                to={createRoute({ type: "story", id: story.id, title: story.title })}
+                            >
+                                {story.title}
+                            </Link>
+                            <div className="flex flex-wrap items-center gap-8 text-body5 mt-8">
+                                <p className="text-gray-600 mr-12">{getDateDifference(story.createdAt, { dense: true })} ago</p>
+                                {story.tags.slice(0, 3).map(tag => <Badge key={tag.id} size='sm'>
+                                    {tag.icon} {tag.title}
+                                </Badge>)}
+                                {story.tags.length > 3 && <Badge size='sm'>
+                                    +{story.tags.length - 3}
+                                </Badge>}
+                            </div>
+                        </li>)}
+                </ul>}
+            {stories.length === 0 &&
+                <div className="flex flex-col gap-16 mt-24">
+                    <p className="text-body3 font-medium">
+                        😐 No Stories Added Yet
+                    </p>
+                    <p className="text-body5 text-gray-500">
+                        The maker have not written any stories yet
+                    </p>
+                    {isOwner && <Button
+                        href='/blog/create-post'
+                        color='primary'
+                    >
+                        Write your first story
+                    </Button>}
+                </div>
+            }
+        </div>
+    )
+}

src/features/Profiles/pages/ProfilePage/profile.graphql

@@ -14,5 +14,15 @@ query profile($profileId: Int!) {
     linkedin
     bio
     location
+    stories {
+      id
+      title
+      createdAt
+      tags {
+        id
+        title
+        icon
+      }
+    }
   }
 }