feat: create bounty card component

src/components/common/BountyCard.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import styled from 'styled-components';
+import { colors } from 'config';
+import { BountyCard } from 'store/interface';
+
+export const CardContainer = styled.div`
+  width: 384px;
+  height: 192px;
+  background: white;
+  border: 1px solid ${colors.light.grayish.G800};
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const CardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+export const CardTitle = styled.h3`
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  padding-right: 16px;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+
+  &:hover {
+    color: ${colors.light.borderGreen1};
+    text-decoration: underline;
+  }
+`;
+
+export const BountyCardList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+  width: 100%;
+`;
+
+const BountyCardComp: React.FC<BountyCard> = observer(
+  ({ id, title, features, phase, workspace, assigneePic }: BountyCard) => (
+    <CardContainer>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <div>{assigneePic ? <img src={assigneePic} alt="Assigner" /> : 'No Pic'}</div>
+      </CardHeader>
+      <div>
+        <p>
+          <strong>Feature:</strong> {features}
+        </p>
+        <p>
+          <strong>Phase:</strong> {phase}
+        </p>
+        <p>
+          <strong>Workspace:</strong> {workspace}
+        </p>
+        <p>
+          <strong>ID:</strong> {id}
+        </p>
+      </div>
+    </CardContainer>
+  )
+);
+
+export default BountyCardComp;

src/people/WorkSpacePlanner/index.tsx

@@ -5,6 +5,7 @@ import { EuiLoadingSpinner } from '@elastic/eui';
 import styled from 'styled-components';
 import { useBountyCardStore } from 'store/bountyCard';
 import { BountyCard } from 'store/interface';
+import BountyCardComp from 'components/common/BountyCard';
 import { useStores } from '../../store';
 import { colors } from '../../config';
 import { WorkspacePlannerHeader } from './WorkspacePlannerHeader';
@@ -72,17 +73,14 @@ const WorkspacePlanner = () => {
       <WorkspacePlannerHeader workspace_uuid={uuid} workspaceData={workspaceData} />
       <ContentArea>
         <h1>Welcome to the new Workspace Planner</h1>
-        <h2>Bounty Cards</h2>
         {bountyCardStore.loading ? (
           <EuiLoadingSpinner size="m" />
         ) : bountyCardStore.error ? (
           <p style={{ color: 'red' }}>{bountyCardStore.error}</p>
         ) : (
           <BountyCardList>
             {bountyCardStore.bountyCards.map((card: BountyCard) => (
-              <li key={card.id}>
-                <strong>{card.title}</strong>
-              </li>
+              <BountyCardComp key={card.id} {...card} />
             ))}
           </BountyCardList>
         )}

src/store/interface.ts

@@ -511,4 +511,5 @@ export interface BountyCard {
   features: Feature;
   phase: Phase;
   workspace: Workspace;
+  assigneePic: string;
 }