Componente Card

Estamos creando un marketplace y el elemento central de todo son las Cards. En general las cards son usadas en todo tipo de aplicaciones web como plantillas en donde iremos alojando todos los ítems que necesitamos, todos con una misma estructura pero con diferente información.

En nuestro caso el primer card que nos interesa crear es uno que contenga la información general de un producto, a modo de catálogo, para que el usuario pueda empezar a apreciar lo que contiene nuestro marketplace. Siempre antes de empezar a crear etiquetas y clases, es una buena idea primero tener una muestra, boceto o diseño en el cual nos podamos basar para ir creando el modelo de una card.

Ese es el modelo que queremos seguir y por lo que podemos ver, podemos empezar estructurando un div que contenga un figure y una etiqueta p.

• En el figure podrían la etiqueta con la categoría del producto, como un span. Evidentemente tenemos que colocar la imagen con un img. También devemos incluir un pequeño botón que nos permita agregar el producto, por ahora un div con un “+”.
• En el p irían nuestros span de información, para el nombre del producto y el precio.

Esta estructura podemos empezar a crearla en un nuevo componente Card:

Quedaría nuestro componente de la siguiente manera:

import React from 'react'

const Card = () => {
  return (
    <div>
        <figure>
            <span> Electronics </span>
            <img src='imgage' alt='Telescope'></img>
            <div> + </div>
        </figure>

        <p>
            <span>Telescope</span>
            <span>$1200</span>
        </p>
    </div>
  )
}

export default Card;

Es hora de ir viendo el resultado entonces antes de estilizar, procederemos a instanciar este card en nuestro componente home.

import Layout from '../../Components/Layout';
import Card from '../../Components/Card';

function Home() {
  return (
    <Layout>
      <div>
        <Card></Card>
      </div>
    </Layout>
  );
}

export default Home

Con esa estructura clara, podemos empezar agregar todos los estilos que queramos para poder dejar nuestra card, como el diseño previsto. Al usar Tailwind CSS, no siempre sabremos exactamente cómo se abrevia cada propiedad, por lo que podemos tener siempre a la mano la documentación oficial, en donde podemos por ejemplo buscar “font” y saldrán todas las opciones que disponemos, ejemplos y más.

Font Weight - Tailwind CSS

Con estilos y con información quemada en el card tendríamos el resultado deseado:

import React from 'react'

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/80 rounded-md text-black text-xs font-bold m-2 px-2 py-0.5'
            >
                Electronics
            </span>
            <img 
                className='w-full h-full object-cover rounded-lg'
                src='<https://images.pexels.com/photos/2034892/pexels-photo-2034892.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1>' 
                alt='Telescope'
            >
            </img>
            <div className='absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1 font-bold'>
                +
            </div>
        </figure>

        <p className='flex justify-between'>
            <span className='text-base font-normal'>Telescope</span>
            <span className='text-base font-normal'>$1200</span>
        </p>
    </div>
  )
}

export default Card;

Con esos estilos probablemente tendremos el resultado deseado en el navegador pero… ¿Vamos acaso a escribir manualmente la información de cada Card? Por supuesto que no, entonces necesitamos 2 cosas:

1. Llamar una fuente de información que nos provea de todos los ítems que necesitemos renderizar.