feat: add projects card to user profile

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

@@ -100,11 +100,11 @@ export default function AboutCard({ user, isOwner }: Props) {
                             </a>
                                 :
                                 <CopyToClipboard
+                                    key={idx}
                                     text={link.value}
                                     onCopy={() => NotificationsService.info(" Copied to clipboard", { icon: "📋" })}
                                 >
                                     <button
-                                        key={idx}
                                         onClick={() => { }}
                                         className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
                                     >

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

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import MakerProjectsCard from './MakerProjectsCard';
+
+export default {
+    title: 'Profiles/Profile Page/Projects Card',
+    component: MakerProjectsCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof MakerProjectsCard>;
+
+
+const Template: ComponentStory<typeof MakerProjectsCard> = (args) => <div className="max-w-[326px]"><MakerProjectsCard {...args as any} ></MakerProjectsCard></div>
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

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

@@ -0,0 +1,39 @@
+
+import { Link } from 'react-router-dom'
+import Button from 'src/Components/Button/Button'
+import Card from 'src/Components/Card/Card'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
+import { ProfileQuery, User, useSimilarProjectsQuery } from 'src/graphql'
+import { createRoute } from 'src/utils/routing'
+
+interface Props {
+    projects: NonNullable<ProfileQuery['profile']>['projects']
+    isOwner?: boolean;
+}
+
+export default function MakerProjectsCard({ projects, isOwner }: Props) {
+
+
+    return (
+        <Card>
+            <h3 className="text-body2 font-bolder">🚀 Projects ({projects.length})</h3>
+            {projects.length === 0 && <>
+                <p className="text-gray-700 text-body4">😐 No projects listed</p>
+                {isOwner && <Button color='primary' className='mt-16' size='sm' href={createRoute({ type: "edit-project" })}>List your first project</Button>}
+            </>}
+            <ul className='flex flex-col'>
+                {projects.map(project => {
+                    return <Link key={project.id} to={createRoute({ type: "project", tag: project.hashtag })} className="md:border-b py-16 last-of-type:border-b-0 last-of-type:pb-0">
+                        <li className="flex items-center gap-12">
+                            <img className='w-48 aspect-square rounded-12 border border-gray-100' alt='' src={project.thumbnail_image} />
+                            <div className='overflow-hidden'>
+                                <p className="text-body4 text-gray-800 font-medium whitespace-nowrap overflow-hidden text-ellipsis">{project.title}</p>
+                                <p className="text-body5 text-gray-500">{project.category.icon} {project.category.title}</p>
+                            </div>
+                        </li>
+                    </Link>
+                })}
+            </ul>
+        </Card>
+    )
+}

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

@@ -12,6 +12,7 @@ import SkillsCard from "./SkillsCard/SkillsCard"
 import TournamentsCard from "./TournamentsCard/TournamentsCard"
 import { MEDIA_QUERIES } from "src/utils/theme"
 import SimilarMakersCard from "./SimilarMakersCard/SimilarMakersCard"
+import MakerProjectsCard from "./MakerProjectsCard/MakerProjectsCard"
 
 export default function ProfilePage() {
 
@@ -65,6 +66,7 @@ export default function ProfilePage() {
                             <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
                         </main>
                         <aside className="min-w-0">
+                            <MakerProjectsCard projects={profileQuery.data.profile.projects} isOwner={isOwner} />
                             <SimilarMakersCard makers={profileQuery.data.profile.similar_makers} />
                         </aside>
                     </>
@@ -74,6 +76,7 @@ export default function ProfilePage() {
                             <AboutCard user={profileQuery.data.profile} isOwner={isOwner} />
                             <RolesCard roles={profileQuery.data.profile.roles} isOwner={isOwner} />
                             <SkillsCard skills={profileQuery.data.profile.skills} isOwner={isOwner} />
+                            <MakerProjectsCard projects={profileQuery.data.profile.projects} isOwner={isOwner} />
                             <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
                         </main>
                     </>

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

@@ -17,6 +17,17 @@ query profile($profileId: Int!) {
       start_date
       end_date
     }
+    projects {
+      id
+      hashtag
+      title
+      thumbnail_image
+      category {
+        id
+        icon
+        title
+      }
+    }
     similar_makers {
       id
       name

src/features/Projects/pages/ProjectPage/ProjectPage.tsx

@@ -70,7 +70,7 @@ export default function ProjectPage() {
                     <img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
                 </div>
             </div>
-            <div className={`content-container md:pt-32 bg-white md:bg-inherit`}
+            <div className={`content-container pb-32 md:pt-32 bg-white md:bg-inherit`}
             >
                 <div className={` ${styles.grid}`}
                 >{isMediumScreen ?