Skip to content
This repository has been archived by the owner on Jun 6, 2024. It is now read-only.

Commit

Permalink
Tootip en descuentos
Browse files Browse the repository at this point in the history
  • Loading branch information
@adriandrs
adriandrs committed Jun 4, 2024
1 parent d064bab commit a7f106d
Showing 1 changed file with 44 additions and 35 deletions.
79 changes: 44 additions & 35 deletions client/src/components/ui/Ofertas.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import PopupLogin from "../../components/ui/Login/PopupLogin";
import { useState } from 'react'
import { useEffect } from 'react';
import { jwtDecode } from "jwt-decode";
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'

const StyledRating = styled(Rating)({
'& .MuiRating-iconFilled': {
Expand Down Expand Up @@ -125,43 +127,50 @@ function Ofertas({ producto, handleClickCarrito, noDesc }) {
};

return (
<div className='my-2 mx-4 font-[abeatbyKai] grid content-between h-[97%]'>
<div className='flex justify-end'>
<Box
className="absolute z-20 flex justify-end float-right m-2"
sx={{
'& > legend': { mt: 0 },
}}
>
<StyledRating
name="customized-color"
defaultValue={0}
max={1}
value={producto.favorito || favorites[producto.pkIdPS] ? 1 : 0}
getLabelText={(value) => `${value} Heart${value !== 1 ? 's' : ''}`}
precision={1}
icon={<FavoriteIcon fontSize="inherit" />}
emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
onChange={() => toggleFavorite(producto)}
/>
</Box>
</div>
<img onClick={() => handleViewMore(producto)} className='w-[100%] h-[100%] hover:opacity-80 ml-0 hover:cursor-pointer aspect-square' src={producto.img} alt={producto.nombre} />
<hr />
<div className='grid h-64 place-content-between'>
<p className='text-[#0BC26A] pt-4 text-lg text-center'>{'$' + Number(producto.precio) + ' MXN'} <span className='text-[#000000] line-through'>{'$' + formatPrice(Number(producto.precio) + 120)}</span></p>
<div className='flex justify-center'>
<Rating className='' value={producto.valoracion} readOnly unratedcolor="amber" ratedcolor="amber" />
<>
<div className='my-2 mx-4 font-[abeatbyKai] grid content-between h-[97%]'>
<div className='flex justify-end'>
<Box
className="absolute z-20 flex justify-end float-right m-2"
sx={{
'& > legend': { mt: 0 },
}}
>
<StyledRating
name="customized-color"
defaultValue={0}
max={1}
value={producto.favorito || favorites[producto.pkIdPS] ? 1 : 0}
getLabelText={(value) => `${value} Heart${value !== 1 ? 's' : ''}`}
precision={1}
icon={<FavoriteIcon fontSize="inherit" />}
emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
onChange={() => toggleFavorite(producto)}
/>
</Box>
</div>
<h6 className='pt-2 text-xl font-bold text-center'>{producto.nombre.length > 27 ? producto.nombre.substring(0, 27) + '...' : producto.nombre}</h6>
<p className='text-center'>{producto.descripcionOferta}</p>
<div className='mt-2'>
<button onClick={() => handleClick(producto)} className=" text-xs transition-all duration-300 px-2 m-auto hover:bg-[#036C65] hover: hover:[#036C65] hover:ring-offset-1 group relative flex h-10 items-center justify-center overflow-hidden rounded-xl border-2 bg-[#EB5765] font-[abeatbykai] text-neutral-200">Agregar <IconoAgregarAlCarrito /> <div className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-0 group-hover:translate-x-0 group-hover:pl-1 group-hover:opacity-100"></div></button>

<img data-tooltip-id="ver" data-tooltip-content="Ver producto" onClick={() => handleViewMore(producto)} className='w-[100%] h-[100%] hover:opacity-80 ml-0 hover:cursor-pointer aspect-square' src={producto.img} alt={producto.nombre} />
<hr />
<div className='grid h-64 place-content-between'>
<p className='text-[#0BC26A] pt-4 text-lg text-center'>{'$' + Number(producto.precio) + ' MXN'} <span className='text-[#000000] line-through'>{'$' + formatPrice(Number(producto.precio) + 120)}</span></p>
<div className='flex justify-center'>
<Rating className='' value={producto.valoracion} readOnly unratedcolor="amber" ratedcolor="amber" />
</div>
<h6 className='pt-2 text-xl font-bold text-center'>{producto.nombre.length > 27 ? producto.nombre.substring(0, 20) + '...' : producto.nombre}</h6>
<p className='text-center'>{producto.descripcionOferta}</p>
<div className='mt-2'>
<button onClick={() => handleClick(producto)} className=" text-xs transition-all duration-300 px-2 m-auto hover:bg-[#036C65] hover: hover:[#036C65] hover:ring-offset-1 group relative flex h-10 items-center justify-center overflow-hidden rounded-xl border-2 bg-[#EB5765] font-[abeatbykai] text-neutral-200">Agregar <IconoAgregarAlCarrito /> <div className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-0 group-hover:translate-x-0 group-hover:pl-1 group-hover:opacity-100"></div></button>

</div>
</div>
</div>
</div >
</div >
)
</>
)
}
<ToastContainer position={'bottom-right'} theme={'light'} />
<>
<ToastContainer position={'bottom-right'} theme={'light'} />
<Tooltip id="ver" />
</>

export default Ofertas;

0 comments on commit a7f106d

Please sign in to comment.