Taskcard - Add edit button

src/features/TaskCard/TaskCard.js

@@ -8,14 +8,18 @@ export function TaskCard({ cardData, listID }) {
   const [isEditing, setIsEditing] = useState(false);
 
   const stopEditing = () => setIsEditing(false);
+  const startEditing = () => setIsEditing(true);
 
   return !isEditing ? (
     <div
       className={styles.cardContainer}
       tabIndex={1}
-      onDoubleClick={e => setIsEditing(true)}
+      onDoubleClick={startEditing}
     >
-      {cardData.text}
+      <div>{cardData.text}</div>
+      <div className={styles.cardEditBtn}>
+        <input type="button" value="Edit" onClick={startEditing} />
+      </div>
     </div>
   ) : (
     <CreateOrEditTaskCard

src/features/TaskCard/TaskCard.module.css

@@ -1,4 +1,5 @@
 .cardContainer {
+  position: relative;
   background-color: #fff;
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
@@ -6,6 +7,18 @@
   margin: 8px 0;
 }
 
+.cardEditBtn {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  visibility: hidden;
+}
+
+.cardContainer:focus .cardEditBtn,
+.cardContainer:focus-within .cardEditBtn {
+  visibility: visible;
+}
+
 .createCardContainer {
   width: 100%;
   resize: vertical;