From 914ec581d63b8eb2192559441823c55c03e72639 Mon Sep 17 00:00:00 2001
From: jordan-ae <arreyetta1jnr@gmail.com>
Date: Fri, 27 Dec 2024 17:19:52 +0100
Subject: [PATCH] feat: create bounty card component

---
 src/components/common/BountyCard.tsx  | 76 +++++++++++++++++++++++++++
 src/people/WorkSpacePlanner/index.tsx |  6 +--
 src/store/interface.ts                |  1 +
 3 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/components/common/BountyCard.tsx

diff --git a/src/components/common/BountyCard.tsx b/src/components/common/BountyCard.tsx
new file mode 100644
index 00000000..31d46ffb
--- /dev/null
+++ b/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;
diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx
index 5f91ecf2..1e87332b 100644
--- a/src/people/WorkSpacePlanner/index.tsx
+++ b/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,7 +73,6 @@ 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 ? (
@@ -80,9 +80,7 @@ const WorkspacePlanner = () => {
         ) : (
           <BountyCardList>
             {bountyCardStore.bountyCards.map((card: BountyCard) => (
-              <li key={card.id}>
-                <strong>{card.title}</strong>
-              </li>
+              <BountyCardComp key={card.id} {...card} />
             ))}
           </BountyCardList>
         )}
diff --git a/src/store/interface.ts b/src/store/interface.ts
index 3702f13a..6b3f563b 100644
--- a/src/store/interface.ts
+++ b/src/store/interface.ts
@@ -511,4 +511,5 @@ export interface BountyCard {
   features: Feature;
   phase: Phase;
   workspace: Workspace;
+  assigneePic: string;
 }