Abriendo el detalle de cada producto

Para no usar archivo CSS en esta clase puedes adicionar esta clase.

top-[68px] w-[360px] h-[calc(100vh-68px)]

Muy importante nada de espacios dentro de los square brackets o “[ ]”

No hace falta instalar los iconos. Haciendo hover en cada uno de ellos tenemos la opción de copiar el SVG:

<button
          onClick={() => context.setCount(context.Count + 1)}
          className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1"
        >
          <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
            <path fillRule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clipRule="evenodd" />
          </svg>
        </button>

1- npm install @heroicons/react

2- import { BeakerIcon, ShoppingCartIcon } from ‘@heroicons/react/24/solid’

3- <ShoppingCartIcon className=“h-6 w-6 text-blue-500” />

Details hasta el momento

import React from 'react'
import { ArchiveBoxXMarkIcon } from '@heroicons/react/24/solid'

export const ProductDetail = () => {
  return (
    <aside className=" flex flex-col fixed right-0 border bg-white border-black rounded-lg w-[360px] h-[calc(100vh-80px)] bottom-4">
    <div className='flex justify-between items-center p-6'>
     <h2 className='font-medium text-xl'>Detail</h2>
     <div> <ArchiveBoxXMarkIcon  className="h-6 w-6 text-black-500 cursor-pointer" /></div>
    </div>
    </aside>
  )
}

Tailwind tiene una forma fácil de añadir valores específicos añadiendo w-[360px] e incluso usando calc dentro h-[calc(100vh-80px)]. Pero será esto pulcro para un código de producción?

<aside className="w-[360px] flex flex-col fixed right-0 border border-black rounded-lg bg-white h-[calc(100vh-80px)]">
      <div className="flex justify-between items-center p-6">
        <h2 className="font-medium text-xl">Details</h2>
        <div>
          <svg
            xmlns="https://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="w-6 h-6"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </div>
      </div>
    </aside>

Heroic icons

npm install @heroicons/react

Ver docs en: https://github.com/tailwindlabs/heroicons

Quiz realizado, Comparto avance en el cual cambie los logos e iconos que habiamos usados por unos que me llamaron la atencion

A la hora de usarlo solo tengo que importar el UseContextGlobal y asi no tengo que importar todas las veces el usecontext

import {UseContextGlobal} from '../../Context';
const ProductDetails = () => {
    const context = UseContextGlobal()
    return ( 
        <aside className=" flex flex-col fixed right-3 border bg-white opacity-90   border-black rounded-lg top-[68px] w-[360px] h-[calc(100vh-80px)] bottom-4 ">
        <div className='flex justify-between items-center p-6'>
         <h2 className='font-medium text-xl'>Detail Order</h2> 
         <h3 className="font-medium text-xl" >Cantidad: {context.count}</h3>
         <div className="h-6 w-6 text-black-500 cursor-pointer"> </div>
        </div>
        </aside>
     );
}
 
export default ProductDetails;

Asi quedo mi contexto global,

import { createContext, useState,useContext} from 'react'
export const ShoppingCartContext = createContext()

export const ShoppingCartProvider = ({children}) => {
  const [count, setCount] = useState(0)
  return (
    <ShoppingCartContext.Provider value={{count,setCount }}>
      {children}
    </ShoppingCartContext.Provider>
  )
}

export const UseContextGlobal = () => {
  return useContext(ShoppingCartContext);
}

Asi vamos…

¡Oh no! El dominio de la API, ¡expiró!

https://api.escuelajs.co/api/v1/products

¿O lo mudaron y no me he enterado? 😃

Para los iconos, les recomiendo la libreria react-icons

<div
className='text-black text-lg font-bold absolute py-2 bottom-2 right-2 flex justify-center items-center bg-white w-8 h-8 p-1 rounded-full’
onClick={() => context.setCount(context.count +1)}>
+
</div>