iconos y otros

Vaap2099 · Aug 7, 2023 · 2a4a088 · 2a4a088
1 parent f383a50
commit 2a4a088
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 38 deletions.
diff --git a/src/CompleteIcon.js b/src/CompleteIcon.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { TodoIcon } from './TodoIcon';
+
+function CompleteIcon ({completed, onComplete}) {
+    return (
+        <TodoIcon
+        type = "check"
+        color= {completed ? 'green' : 'gray' }
+        onClick={onComplete}
+        />
+    );
+}
+
+export { CompleteIcon };
diff --git a/src/DeleteIcon.js b/src/DeleteIcon.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { TodoIcon } from './TodoIcon';
+
+function DeleteIcon ({onDelete}) {
+    return (
+        <TodoIcon
+        type = "delete"
+        color= "gray"
+        onClick={onDelete}
+        />
+    );
+}
+
+export { DeleteIcon };
diff --git a/src/TodoIcon.css b/src/TodoIcon.css
@@ -0,0 +1,42 @@
+.Icon {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    width: 48px;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.Icon-container-check {
+    position: absolute;
+    left: 12px;
+}
+.Icon-container-check--active {
+    color: #4caf50;
+
+}
+
+.Icon-container-delete {
+    position: absolute;
+    top: -24px;
+    right: 0;
+}
+
+.Icon-container-delete:hover {
+    color: red;
+}
+
+.Icon-svg {
+    width: 24px;
+    height: 24px;
+}
+
+.Icon-container-delete:hover .Icon-svg {
+    fill: red;
+}
+
+.Icon-container-check:hover .Icon-svg {
+    fill: green;
+}
diff --git a/src/TodoIcon.js b/src/TodoIcon.js
@@ -0,0 +1,20 @@
+import { ReactComponent as CheckSVG } from './check.svg';
+import { ReactComponent as DeleteSVG } from './delete.svg';
+import './TodoIcon.css'
+
+const iconTypes = {
+    "check": (color) => <CheckSVG className='Icon-svg' fill={color} />,
+    "delete": (color) => <DeleteSVG className='Icon-svg' fill={color} />,
+}
+
+function TodoIcon({ type, color, onClick }) {
+    return (
+        <span
+        className={`Icon-container Icon-container-${type}`}
+        onClick={onClick}>                       
+            {iconTypes[type](color)}            
+        </span>
+    );
+}
+
+export {TodoIcon}
diff --git a/src/TodoItem.css b/src/TodoItem.css
@@ -20,32 +20,3 @@
     text-decoration: line-through;
 }
 
-.Icon {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 48px;
-    width: 48px;
-    font-size: 24px;
-    font-weight: bold;
-}
-
-.Icon-check {
-    position: absolute;
-    left: 12px;
-}
-.Icon-check--active {
-    color: #4caf50;
-
-}
-
-.Icon-delete {
-    position: absolute;
-    top: -24px;
-    right: 0;
-}
-
-.Icon-delete:hover {
-    color: red;
-}
diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -1,17 +1,19 @@
+import { CompleteIcon } from './CompleteIcon';
+import { DeleteIcon } from './DeleteIcon';
 import './TodoItem.css'
 function TodoItem(props) {
     return (
       <li className="TodoItem">
-        <span className={`Icon Icon-check ${props.completed && "Icon-check--active"}`}
-        onClick={props.onComplete}
-        >
-          V 
-        </span>
+        <CompleteIcon 
+        completed={props.completed}
+        onComplete={props.onComplete}
+        />
+
         <p className={`TodoItem-p ${props.completed && "TodoItem-p--complete"}`} >{props.text}</p>
-        <span className="Icon Icon-delete"
-        onClick={props.onDelete} >
-          X
-        </span>
+        <DeleteIcon 
+        onDelete={props.onDelete}
+        />
+
       </li>
     );
   }

diff --git a/src/check.svg b/src/check.svg
diff --git a/src/delete.svg b/src/delete.svg