No tienes acceso a esta clase

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

Abriendo el detalle de cada producto

11/31
Recursos

Aportes 20

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

De acuerdo a la documentaci贸n puedes poner valores como este dentro del className

<aside className="flex flex-col fixed right-0 border bg-white border-black rounded-lg w-[360px] h-[calc(100vh-80px)]>"
"h-[calc(100vh-80px)]" // Arbitrary values

https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

Hola comunidad! Prepar茅 un ProductDetail pero con modales y React Portal, les dejo mis apuntes y el paso a paso hecho en Notion. Espero les sea de utilidad.
Link aqu铆:
https://bg99astro.notion.site/Product-detail-con-Modales-1c2664cdc3d1416eb33b718405654018?pvs=4

1- npm install @heroicons/react

2- import { BeakerIcon, ShoppingCartIcon } from 鈥楡heroicons/react/24/solid鈥

3- <ShoppingCartIcon className=鈥渉-6 w-6 text-blue-500鈥 />

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>

El endpoint https://api.escuelajs.co/api/v1/products esta siendo muy manipulado.

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 鈥淸 ]鈥

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

Heroic icons

npm install @heroicons/react

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

![](https://static.platzi.com/media/user_upload/image-58c6578d-65d9-41b2-a752-715bb5511c57.jpg) No logro entender, por qu茅 cuando aplico tailwind los estilos no se toman, como si se toman cuando los coloco con css nativo.
Recomiendo usar React Icons [React icons preview for hi (react-icons.github.io)](https://react-icons.github.io/react-icons/icons/hi/)

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鈥

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>

隆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>