No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Bot贸n de editar TODOs

20/30
Recursos

0 0 24 24"
  fill = "none"
  xmlns = "http://www.w3.org/2000/svg"
>
  18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.
    9993Z"
  />
  23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.
    130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099
    5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
  

Aportes 8

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Dejo el codigo del edit icon, en los recursos aparece incompleto.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns="https://www.w3.org/2000/svg"
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

Si tienen problemas con los iconos, les recomiendo usar react icons.
Es muy sencillo y pr谩ctico de usar

Para quien tenga errores relacionados al edit.svg: en mi caso, lo solucion茅 eliminando los saltos de l铆nea de la propiedad 鈥渄鈥 de la etiqueta <path/> 馃槈

El .SVG para editar que use de: heroicons

<svg 

   xmlns='https://www.w3.org/2000/svg'
   fill='none' viewBox='0 0 24 24' 
   strokeWidth={1.7} 
   stroke='currentColor' 
   className='w-6 h-6'>

   <path strokeLinecap='round' strokeLinejoin='round' d='M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10' />

</svg>

parece que falto algo en esta clase, aca les dejo el codigo de mi solucion para la funcionalidad del boton de editar en el componente 鈥淭odoIcom鈥.

import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css'

const iconTypes = {
  'check': color => <CheckSVG className='Icon-svg Icon-svg--check' fill={color} />,
  'delete': color => <DeleteSVG className='Icon-svg Icon-svg--delete' fill={color} />,
  'edit':  (color, onEditTwo) => <EditSVG className='Icon-svg icon-svg--edit' fill={color} onClick={onEditTwo}/>,
};

const TodoIcon = ({ type, color = 'gray', joinCrossOutEliminate, onEditTwo }) => {
  return (
    <span
    className={`Icon-container Icon-container-${type}`}
    onClick={joinCrossOutEliminate}
    > 
    {iconTypes[type](color, onEditTwo)}
    </span>
  )
};


export { TodoIcon };

C贸digo de la clase con typescript y react icons

import { FC } from "react"
import { BiCheckCircle, BiEdit } from 'react-icons/bi'
import { TiDelete } from 'react-icons/ti'

import './TodoItem.css'

interface Props {
  text:string,
  completed: boolean,
  onComplete: ()=>void,
  onEdit: ()=>void,
  onDelete: ()=>void
}

const TodoItem:FC<Props> = ({
  text,
  completed,
  onComplete,
  onEdit,
  onDelete
}) => {
  return (
    <li className="TodoItem">
      <BiCheckCircle
        className={`Icon Icon-check ${completed && "Icon-check--active"}`}
        onClick={onComplete}
      />
      <p className={`TodoItem-p ${completed && "TodoItem-p--complete"}`}>{text}</p>
      <BiEdit
        className={`Icon Icon-edit`}
        onClick={onEdit}
      />
      <TiDelete 
        className="Icon Icon-delete"
        onClick={onDelete}
      />
    </li>
  )
}

export { TodoItem }

A mi me pas贸 que cuando quer铆a cambiarle el color al seg que export茅 de Figma no me dejaba.
Al editar el icono svg en VS me di cuenta que ten铆a una propiedad fill, por lo que se la quit茅 y con eso ya funcion贸 馃槂

Bot贸n de editar TODOs

.
Dentro de la carpeta src/ui/TodoIcon crearemos un archivo edit.svg de la siguiente manera.
.

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns=""
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

.
Posteriormente, dentro del archivo index.js en el mismo directorio, vamos a a帽adir este svg al objeto de iconTypes del componente TodoIcon.
.

import React from 'react';
import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css';

const iconTypes = {
  "check": color => (
    <CheckSVG className="Icon-svg Icon-svg--check" fill={color} />
  ),
  "edit": color => (
    <EditSVG className="Icon-svg Icon-svg--edit" fill={color} />
  ),
  "delete": color => (
    <DeleteSVG className="Icon-svg Icon-svg--delete" fill={color} />
  ),
};

function TodoIcon({ type, color = 'gray', onClick }) {
  return (
    <span
      className={`Icon-container Icon-container--${type}`}
      onClick={onClick}
    >
      {iconTypes[type](color)}
    </span>
  );
}

export { TodoIcon };

.
Creamos un archivo EditIcon.js donde llamamos a TodoIcon pasandole el tipo edit y la funci贸n onEdit en onClick como propiedades.
.

import React from 'react';
import { TodoIcon } from './';

function EditIcon({ onEdit }) {
  return (
    <TodoIcon
      type="edit"
      onClick={onEdit}
    />
  );
}

export { EditIcon };

.
En el archivo TodoIcon.css agregamos la clase Icon-container--edit y Icon-container:hover .Icon-svg--edit.
.

.Icon-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  /* background-color: #CCC; */
}
.Icon-container--check {
  position: absolute;
  left: 12px;
}
.Icon-container--edit {
  position: absolute;
  top: -24px;
  right: 48px;
}
.Icon-container--delete {
  position: absolute;
  top: -24px;
  right: 0;
}

.Icon-svg {
  width: 24px;
  height: 24px;
  transition: fill .15s;
}
.Icon-container:hover .Icon-svg--check {
  fill: #4caf50;
}
.Icon-container:hover .Icon-svg--edit {
  fill: #61DAFA;
}
.Icon-container:hover .Icon-svg--delete {
  fill: red;
}

.
Finalmente, solo queda renderizar este bot贸n desde el componente TodoItem de la siguiente manera.
.

import React from 'react';
import { CompleteIcon } from '../TodoIcon/CompleteIcon';
import { EditIcon } from '../TodoIcon/EditIcon';
import { DeleteIcon } from '../TodoIcon/DeleteIcon';
import './TodoItem.css';

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon
        completed={props.completed}
        onComplete={props.onComplete}
      />
      <p
        className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}
      >
        {props.text}
      </p>
      <EditIcon
        onEdit={props.onEdit}
      />
      <DeleteIcon
        onDelete={props.onDelete}
      />
    </li>
  );
}

export { TodoItem };

.
Por lo que tendremos que a帽adir la render prop onEdit desde el llamado a TodoItem en el componente HomePage, donde en este caso solo mostrar谩 un mensaje que indica que se editar谩 un TODO.
.

function HomePage() {
...
  return (
    ...
        {todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => console.log('Editar todo')}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
...
  );
}

export { HomePage };