No tienes acceso a esta clase

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

Componente de Card

7/31
Recursos

Aportes 59

Preguntas 5

Ordenar por:

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

Les dejo una Cheat Sheet de Tailwind https://nerdcave.com/tailwind-cheat-sheet
Espero que les sirva para sus proyectos!

Hola comunidad, les comparto mis apuntes en Notion sobre cards y llamado a API麓s, espero les sean de utilidad.
Link aqu铆:
https://bg99astro.notion.site/Cards-y-llamado-a-API-s-b5be45bca26e48a99a25ffb9b650e383

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>
  )
}

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. 鉂わ笍

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

Mi card la hice a partir de un dise帽o de Cosmin Capitanu, tambien utilic茅 react-icons, me qued贸 as铆: ![](https://static.platzi.com/media/user_upload/image-4bfc8ee9-7360-48b7-b00e-0b419d817d48.jpg)

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 馃榿

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

En los cursos de Teff de antes siempre tenia la muletilla de 鈥淏asicamente鈥 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

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 ;

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 ![](https://static.platzi.com/media/user_upload/project-55a07953-e341-40e4-be55-d693e052ae17.jpg)

Por aqu铆 c贸mo qued贸 mi tarjeta, le estoy dando a la p谩gina un estilo neobrutalism

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</h3>
					<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

[](<a href=鈥https://ibb.co/d7txq8R鈥><img src=鈥https://i.ibb.co/d7txq8R/imagen-2023-05-08-103247395.png鈥 alt=鈥渋magen-2023-05-08-103247395鈥 border=鈥0鈥></a>)

<https://tailwindcss.com/>
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-14%20132733-cfd1fed8-7deb-4f18-a648-85fb31d1530a.jpg)Asi va quedando
Mi proyecto va asi de momento.. ![](https://static.platzi.com/media/user_upload/Captura%20desde%202024-02-10%2021-53-19-f2e6474e-4032-47b4-baae-ffe038d528b0.jpg)
Les comparto como quedo mi componente Card: ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-01-23%20a%20la%28s%29%209.21.11%20p.m.-fdb4e536-1762-40e9-b601-ba2cc1f8fd10.jpg)![]()
Les comparto mi card. ![](https://static.platzi.com/media/user_upload/imagen-fe3ea96e-809f-41f7-ae35-14b6a1406ee5.jpg)
![](https://static.platzi.com/media/user_upload/image-5b66172c-0838-475a-ad89-375c35c5cd85.jpg) Aca mi card jj, decidi colocar tambien una shadow

Mi card

Puse tal cual el c贸digo y no se porque el span de Elecronics queda abajo de la imagen 馃槪 ```js const Card = () => { return (
Electronics
+

Headphones $300

) } export default Card ```![](https://i.ibb.co/rMSdrw2/ayuda.png)
```tsx type Props = { children?: React.ReactNode }; export const Layout = ({ children }: Props): JSX.Element => { return (
{children}
) }; ``````ts import { Layout } from '../../Components/Layout/Layout'; import { Card } from '../../Components/Card/Card'; import './home.css' type Props = { children?: React.ReactNode }; export function Home({ }: Props): JSX.Element { return ( <Layout> Home <Card /> </Layout> ) } ```
Es la primera vez que veo Tailwind y aunque me gusta que sea tan sencillo, tambi茅n me da la sensaci贸n de tener c贸digo espagueti, no s茅 si solo es mi percepci贸n, tal vez me falte trabajar m谩s con esta herramienta

Y porque no trabajar con MUI?, Me parece que MUI es mucho m谩s ordenado y profesional.

Ese mouse que tiene la teacher es 茅pico. Otro level
Hola Teff asi va quedando mi pagina:![](https://static.platzi.com/media/user_upload/image-a7ae717e-2939-4a1f-a99d-b06c7a06c334.jpg)

A mi Card le agregue un fondo gris y un desenfoque en la etiqueta, dejo el codigo abajo 猬囷笍

_

const Card = () => {
    return (
        <div className="bg-gray-100 cursor-pointer w-56 h-60 m-4 rounded-lg">
            <figure className="relative mb-2 w-full h-4/5">
                <img src="" alt="headphones" className="object-cover w-full h-full rounded-lg" />
                <div className="absolute top-0 right-0 flex justify-center items-center rounded-full backdrop-blur-sm bg-white/70 w-6 h-6 m-2 font-medium p-1 hover:scale-110 transition-all">+</div>
                <span className="absolute bottom-0 left-0 backdrop-blur-sm bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5">Electronics</span>
            </figure>
            <p className="flex justify-between items-center px-2">
                <span className="text-sm font-light">Headphones</span>
                <span className="text-lg font-medium">$ 300</span>
            </p>
        </div>
    )
}

export { Card };
![]()![](https://static.platzi.com/media/user_upload/image-760cc278-cf30-4918-a17a-e1b3c234f51e.jpg)

As铆 vamos 馃挭

This is mine. ![](https://static.platzi.com/media/user_upload/image-3b70bf29-9bee-401b-a77e-351dfc65be1e.jpg)

Asi me quedo:

Les comparto como quedo la card ![](https://i.ibb.co/LQqVBGM/Captura-de-pantalla-2023-10-01-175036.png)
![](https://static.platzi.com/media/user_upload/image-8f2bcf76-faec-41a7-8850-9926d6e15fbe.jpg)

Todos vamos a hacer como que no vimos la Card con la imagen del Doom Eternal ahi ?

Teffi no es el tipo de persona que hay que hacer enojar evidentemente (?

De maravilla, parece magia!
Y adem谩s al grupo que hizo este curso es claro y ordenado, facilitan las cosas mucho mas!

Que cosa tan loca con Tailwind jajajaja鈥 este framework de CSS es muy interesante. Sigamos aprendiendo 馃槑

asi va mi Proyecto

Asi voy yo

馃憦馃憦馃憦馃憦馃憦馃憦

Les dejo mi card! Reci茅n arranco con Tailwind y me parece que en muchos aspectos es super intuitivo. Est谩 muy interesante.

Ese at煤n gratinado ergon贸mico, lo veo sospechoso

![](

Mi progreso hasta el momento: