Componente de Card
Contenido del curso
Miguel Angel Reyes Moreno
Miguel Ángel Bolaños Quiñonez
Felipe Toro C
Reynaldo Francisco Moreno Briceño
Rodrigo Damián Martinez
Josue Percy Huallullo Cirineo
Luis Sandoval
JOAQUIN DI LERNIA
Victor Hugo Cruz Carballo
Rubén Ernesto Aragón Gil
Randy Ochoa
Santiago Quintero
Randy Ochoa
Freddy Cedeño
Edgardo Luis Jimenez Nuñez
Michael Mescua
Santiago Quintero
Juan Carlos Montilla Sánchez
Diego Eduardo Téllez Contreras
Jaime Alberto Alonso López
Daniel Morales
Hugo René Pereira Monzon
Jose Ever Muñoz Muñoz
Óscar Andrés Ugarte De La Fuente
Aloy Foxy
Eddy Huaylla Quispe
Christopher Romero
David Rangel
Jerysha Sterling
Si el div del '+' es botón... debemos usar la etiqueta correspondiente. Recordemos dar una buena semántica al HTML, obviamente esta etiqueta será clickable y para eso están los botones.
export const Card = () => { return ( <div className="bg-white cursor-pointer w-56 h-60 rounded-lg"> <figure className="relative mb-2 w-full h-4/5"> <span className="absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5"> Electronics </span> <img className="w-full h-full object-cover rounded-lg" src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Headphones" /> <button className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1"> + </button> </figure> <p className="flex justify-between"> <span className="text-sm font-light">Headphones</span> <span className="text-lg font-medium">$300</span> </p> </div> ) }
Si, también pensé en ello
Totalmente de acuerdo, en ese orden de ideas podemos utilizar un article en lugar de div para nuestra card y caption como complemento de nuestro figure en lugar de span, de esta forma nuestro componente trabajaría con etiquetas semánticas. Aveces utilizando React y frameworks solemos abusar de nuestros div que son una etiqueta que nos brindan muchas facilidades y solemos olvidar muchas otras.
Les dejo mi código.
import React from 'react' function Card () { return ( <article className='bg-white cursor-pointer w-56 h-60 rounded-lg'> <figure className='relative mb-2 w-full h-4/5'> <caption className='absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5'>Electronics</caption> <img className='w-full h-full object-cover rounded-lg' src='https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' alt='headphones' /> <button className='absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1'> + </button> </figure> <p className='flex justify-between'> <span className='text-sm font-light'>Headphone</span> <span className='text-lg font-medium'>$300</span> </p> </article> ) } export default Card
Asi va mi Card, decidi colocarle un bg al div de abajo y un box shadow al div de la card para ese efecto sombreado. <3
la palabra Electronics me aparece abajo de la imagen y no se por qué :/
<span className='absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5'>Electronics</span>
Que genial curso, lo estaba esperando mas que nada para organizar la estructura de mis proyectos, los card o los componentes son importantes para ahorrar codigo y ser mas limpios
Comparto como me quedó
pueden utilizar rafce para crear la funcines flechas te ahorra un poquito de tiempo
Con está página nomas toma captura o con la app recorte, seleccione lo que quiere, ctrl + c y pego en esta web:
imgbb
Suba la imagen y luego copie la dirección de imagen
No cobra y es rapido de usar
Si quieren agregar iconos al proyecto se pueden instalar esta dependecia: https://react-icons.github.io/react-icons Es muy facil de usar y tiene una amplia cantidad de iconos 😁
no se por qué no me funciona :(
Pues solo tienes que importar reacts icons en el componente donde lo vas a usar y el nombre del icono y el icono empieza con una letras en este caso es Bs, puede ser Ai Al u otro pero en este caso caso es Bs asi que tambien tienes que especificar la carpeta de donde viene el icono en el from
import { BsPlusCircleFill } from "react-icons/bs" export function Card({ name, price, category, image }) { return ( <figure className="relative w-full h-60 bg-blue-100 rounded-xl overflow-hidden"> <BsPlusCircleFill className="absolute top-2 right-2 w-8 h-8 cursor-pointer"/> <p className="absolute top-0 left-0 bg-red-300 rounded-xl p-2">{category}</p> <img src={image} alt="" className="h-4/5"/> <figcaption className="flex justify-between px-4 py-2"> <p>{name}</p> <span className="text-black font-bold">{price}</span> </figcaption> </figure> ) }```
siento que el símbolo plus no esta centrado en el botón al igual que la palabra de electronics, por que pasará esto?
Nos podria mostrar tu codigo para ver cual seria el problema.
Me pasó igual y tuve que cambiar "p-1" por "pb-1", pero siento que ya es con trampa.
Soy e único al que le cuesta adapatarse a Tailwind?
Creo que es muy cómodo, sin embargo, me cuesta que todo se haga con medidas tan especificas.
Personalmente me gusta jugar con valores muy específicos.
Tal vezsea solo yo que no se usar bien esta herramienta jajaja
También le puedes dar medidas específicas a Tailwindcss, y eso lo haces con los corchetes [ ]
Ejemplo:
mt-[20px] y esa sintaxi la entiende los paquetes de tailwind
En los cursos de Teff de antes siempre tenia la muletilla de "Basicamente" jaja ahora veo que usa diminutivos todo el tiempo: tagsito, componentico, etc... No sé si antes también lo hacia, pero aquí lo he notado mucho xD
Alguien sabe la razón de usar arrow functions para devolver componentes gráficos en fez de una función normal?
const Layout = ({ children }) => { return ( <div className='flex flex-col mt-20 items-center'> {children} </div> ) } function Layout({children}){ return ( <div className='flex flex-col mt-20 items-center'> {children} </div> ) }
Les comparto mi card.
Pueden instalar el plugin de prettier en vscode y en settings.json insertar esta config.
"editor.formatOnSave": true, "prettier.singleQuote": true, "prettier.jsxSingleQuote": true, "prettier.semi": false,
Esto para que cada vez guarden el archivo el código tenga el formato de comillas simples para Js y Jsx. Tampoco que lleven el punto y coma ;
excelente!
No estoy siguiendo como tal el curso, pero asi va el proyecto. Me decante por hacerlo primero mobile firts y ya despues lo escalo a desktop
Chicos, aquí les comparto una librería llamada Circum Icons, muy buena para insertar iconos en nuestros proyectos con React o cualquier otro Framework. 🙂 https://circumicons.com
Personalmente el agregar al carrito prefiero poner debajo y que sea accesible al usuario, creo que con el boton florante en la imagen se entiende que eso abrirá un modal para vista previa.
import React from 'react'; const Card = () => { return ( <div className='flex flex-col w-60 rounded-lg overflow-hidden border border-gray-400 pb-2'> <figure className='relative w-full h-40'> <img src='https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' alt='Product' className='w-full h-full object-cover' /> <span className='px-2 absolute text-xs text-black bg-white/60 rounded-lg bottom-2 left-2'>Electronic</span> </figure> <section className='flex flex-col h-full justify-between p-2 gap-4'> <div className='flex flex-row justify-between items-center'> <h3 className='text-sm font-light'>Headphones</h4> <p className='font-medium'>s/300.00</p> </div> <button className='bg-black text-white rounded-lg w-full py-2 font-medium hover:bg-black/95'>Add to Cart 🛒</button> </section> </div> ); }; export { Card };
Así va quedando mi Card del curso, y estoy familiarizado con tailwindCSS ya desde unos meses atras y me encanta usarlo🤗
En mi experiencia, los estilos p y m en Tailwind funcionan mejor si introduces valores específicos (personalmente prefiero la escala vh), ejemplos: p-[3vh] m-[1vh] py-[3px] mx-[6rem] pl-[12px] mr-[14vh] etc.
Unsplash tiene imágenes de buena calidad para utilizar: https://unsplash.com/es
