-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #128 from Actualiza-Tu-Carro/117-Refactor-lo-mas-v…
…endido 117 refactor lo mas vendido
- Loading branch information
Showing
11 changed files
with
273 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,26 @@ | ||
| @layer base { | ||
| ::-webkit-scrollbar { | ||
| background: #ededed; | ||
| width: 8px; | ||
| } | ||
| ::-webkit-scrollbar-thumb { | ||
| background: #41444384; | ||
| border-radius: 3px; | ||
| } | ||
| ::-webkit-scrollbar-thumb:hover { | ||
| background: #3a3b3b; | ||
| } | ||
| } | ||
| @layer utilities { | ||
| .title { | ||
| font-size: 4rem; | ||
| font-weight: bold; | ||
| text-align: center; | ||
| margin-top: 2rem; | ||
| margin-bottom: 2rem; | ||
| } | ||
| } | ||
|
|
||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
|
|
||
|
|
||
| @layer base { | ||
| /*Cambio de estilos para etiquetas como h1, h2,, h3, p, span, div, | ||
| es decir estilos por default*/ | ||
| } | ||
| @layer utilities { | ||
| .title { | ||
| font-size: 4rem; | ||
| font-weight: bold; | ||
| text-align: center; | ||
| margin-top: 2rem; | ||
| margin-bottom: 2rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| import { ContainerPage } from '../container_page'; | ||
|
|
||
| export default function Landing() { | ||
| return <h1>Hola soy products</h1>; | ||
| return <ContainerPage> | ||
| Products page | ||
| </ContainerPage>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| export default function Heart({ className }: { className: string }) { | ||
| return ( | ||
| <svg | ||
| className={className} | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="100%" | ||
| height="100%" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <g transform="translate(24 0) scale(-1 1)"> | ||
| <g> | ||
| <path | ||
| d="M19.071 13.142L13.414 18.8a2 2 0 0 1-2.828 0l-5.657-5.657A5 5 0 1 1 12 6.072a5 5 0 0 1 7.071 7.07Z" | ||
| opacity="1" | ||
| /> | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| stroke-width="2" | ||
| d="M19.071 13.142L13.414 18.8a2 2 0 0 1-2.828 0l-5.657-5.657a5 5 0 0 1 7.07-7.071a5 5 0 0 1 7.072 7.071Z" | ||
| /> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import Image from 'next/image'; | ||
| import { MainButton } from '../button/button'; | ||
| import Icon from '~/assets/icons/icon'; | ||
| import { ProductCardProps } from '~/types/products'; | ||
| import { useState } from 'react'; | ||
| import Heart from '~/assets/icons/Heart'; | ||
|
|
||
| export function ProductCard({ | ||
| title, | ||
| price, | ||
| offer, | ||
| imageSrc, | ||
| }: ProductCardProps) { | ||
| const [favorite, setFavorite] = useState(false); | ||
| const handleFavorite = () => setFavorite((cur) => !cur); | ||
| return ( | ||
| <div className="p-6 shadow-md hover:shadow-xl rounded-md overflow-hidden bg-white w-[250px] min-h-[330px] relative space-y-3"> | ||
| <Image | ||
| src={imageSrc} | ||
| alt="Cubre Volante" | ||
| width={245} | ||
| height={154} | ||
| className="w-full h-[9.625rem] " | ||
| /> | ||
| <div> | ||
| <h3 className="font-semibold mb-2">{title}</h3> | ||
| <p className="line-through text-secondary-dm text-sm">{`${toCurrency( | ||
| price | ||
| )}`}</p> | ||
| <p className="font-semibold text-primary-lm ">{`${toCurrency( | ||
| price - price * offer | ||
| )}`}</p> | ||
| </div> | ||
| <div className="grid place-content-center"> | ||
| <MainButton color="red" className="flex gap-x-2 py-2 pl-5"> | ||
| Añadir al Carrito | ||
| <div className="w-6 aspect-square"> | ||
| <Icon icon="CarShoping" /> | ||
| </div> | ||
| </MainButton> | ||
| </div> | ||
| <button | ||
| onClick={handleFavorite} | ||
| className="group absolute right-2 top-0 w-8 aspect-square rounded-full bg-white p-0.5 grid place-content-center" | ||
| > | ||
| <Heart | ||
| className={ | ||
| favorite | ||
| ? 'fill-primary-lm stroke-primary-lm group-hover:stroke-text-lm group-hover:fill-text-lm' | ||
| : 'fill-none stroke-text-lm group-hover:stroke-primary-lm' | ||
| } | ||
| /> | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function toCurrency(number: number, currency: string = 'COP') { | ||
| const formatter = new Intl.NumberFormat(currency, { | ||
| currency: currency, | ||
| style: 'currency', | ||
| minimumFractionDigits: 0, | ||
| }); | ||
|
|
||
| return formatter.format(number); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| 'use client'; | ||
| import { useRef } from 'react'; | ||
| import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs'; | ||
|
|
||
| type CarouselProps = { | ||
| children: React.ReactNode[]; | ||
| }; | ||
|
|
||
| export function Carousel({ children }: CarouselProps) { | ||
| const carouselRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| function next() { | ||
| if (!carouselRef.current) return; | ||
|
|
||
| if (carouselRef?.current?.children?.length > 0) { | ||
| const firstElement = carouselRef?.current?.children[0]; | ||
| carouselRef.current.style.transition = '300ms ease-out all'; | ||
|
|
||
| const size = carouselRef.current.children[0].clientWidth; | ||
|
|
||
| carouselRef.current.style.transform = `translatex(-${size}px)`; | ||
|
|
||
| const transicion = () => { | ||
| if (!carouselRef.current) return; | ||
|
|
||
| carouselRef.current.style.transition = 'none'; | ||
| carouselRef.current.style.transform = 'translatex(0px)'; | ||
|
|
||
| carouselRef.current.appendChild(firstElement); | ||
| carouselRef.current.removeEventListener('transitionend', transicion); | ||
| }; | ||
|
|
||
| carouselRef.current.addEventListener('transitionend', transicion); | ||
| } | ||
| } | ||
| function previus() { | ||
| if (!carouselRef.current) return; | ||
|
|
||
| if (carouselRef?.current?.children.length > 0) { | ||
| const endElement = | ||
| carouselRef.current.children[carouselRef.current.children.length - 1]; | ||
| carouselRef.current.insertBefore( | ||
| endElement, | ||
| carouselRef?.current?.firstChild | ||
| ); | ||
|
|
||
| carouselRef.current.style.transition = 'none'; | ||
|
|
||
| const size = carouselRef.current.children[0].clientWidth; | ||
| carouselRef.current.style.transform = `translate(-${size}px)`; | ||
|
|
||
| setTimeout(() => { | ||
| if (!carouselRef.current) return; | ||
|
|
||
| carouselRef.current.style.transition = '300ms ease-out all'; | ||
| carouselRef.current.style.transform = 'translatex(0)'; | ||
| }, 30); | ||
| } | ||
| } | ||
|
|
||
| if (!children.length) return; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="flex gap-1 relative items-center px-2"> | ||
| <button | ||
| onClick={() => previus()} | ||
| className={`w-10 aspect-square rounded-full p-2 bg-white hover:scale-105 hover:text-primary-lm shadow hover:shadow-lg ${''}`} | ||
| > | ||
| <BsChevronCompactLeft size="100%" /> | ||
| </button> | ||
| <div className="overflow-hidden w-full"> | ||
| <div | ||
| ref={carouselRef} | ||
| className="flex flex-nowrap justify-start min-h-[50px]" | ||
| > | ||
| {children.map((child, i) => { | ||
| return ( | ||
| <div | ||
| key={i} | ||
| className={`${ | ||
| i < 4 ? '' : '' | ||
| } min-w-full sm:min-w-[calc(100%/2)] md:min-w-[calc(100%/3)] lg:min-w-[calc(100%/4)] px-1 grid place-content-center overflow-hidden`} | ||
| > | ||
| {child} | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| <button | ||
| onClick={() => next()} | ||
| className={`w-10 aspect-square rounded-full p-2 bg-white shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg ${''}`} | ||
| > | ||
| <BsChevronCompactRight size="100%" /> | ||
| </button> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,31 @@ | ||
| 'use client'; | ||
| import { useState } from 'react'; | ||
| import Card from '../cards/landingCard'; | ||
| import Pagination from '../pagination'; | ||
| import { ProductCard } from '../cards/ProductCard'; | ||
| import { productos } from '~/mockData/mockProducts'; | ||
| import { Carousel } from '../carousels/carousel'; | ||
| import { ProductsProps } from '~/types/products'; | ||
|
|
||
| type Brand = { | ||
| id: string; | ||
| name: string; | ||
| }; | ||
|
|
||
| type Category = { | ||
| id: string; | ||
| name: string; | ||
| }; | ||
|
|
||
| type Products = { | ||
| id: string; | ||
| title: string; | ||
| state: string; | ||
| stock: number; | ||
| price: number; | ||
| availability: number; | ||
| image: string[]; | ||
| model: string; | ||
| year: string; | ||
| brand: Brand; | ||
| category: Category; | ||
| }; | ||
|
|
||
| type ContainerCardProps = { | ||
| products: Products[]; | ||
| }; | ||
|
|
||
| export function ContainerCard({ products }: ContainerCardProps) { | ||
| const [pagination, setPagination] = useState({ | ||
| page: 1, | ||
| itemsPage: 5, | ||
| }); | ||
|
|
||
| const maximo = Math.ceil(products.length / pagination.itemsPage); | ||
| const startIndex = (pagination.page - 1) * pagination.itemsPage; | ||
| const endIndex = startIndex + pagination.itemsPage; | ||
|
|
||
| const anteriorSiguiente = (action: 'Anterior' | 'Siguiente') => { | ||
| if (action === 'Anterior') | ||
| setPagination({ | ||
| ...pagination, | ||
| page: pagination.page - 1, | ||
| }); | ||
| else if (action === 'Siguiente') | ||
| setPagination({ | ||
| ...pagination, | ||
| page: pagination.page + 1, | ||
| }); | ||
| }; | ||
| export function TopSellers() { | ||
| const products = productos.slice(0, 10); | ||
|
|
||
| return ( | ||
| <div> | ||
| <h1 className='title'> | ||
| Productos | ||
| </h1> | ||
| <div className="grid justify-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8"> | ||
| {products.slice(startIndex, endIndex).map((producto: Products) => { | ||
| <div className="my-8"> | ||
| <div className="grid place-content-center bg-[#13131D] text-white border-b-4 border-b-[#ff0000] py-5 mb-6"> | ||
| <h2 className="text-2xl">Lo más vendidos</h2> | ||
| </div> | ||
| <Carousel> | ||
| {products.map((producto: ProductsProps) => { | ||
| const { title, id, price, image } = producto; | ||
| return ( | ||
| <Card | ||
| <ProductCard | ||
| key={id} | ||
| title={title} | ||
| price={price.toString()} | ||
| nota={title} | ||
| price={price} | ||
| offer={0.1} | ||
| imageSrc={image[0]} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| <div className="flex justify-center items-center text-center m-10"> | ||
| <Pagination | ||
| page={pagination.page} | ||
| anteriorSiguiente={anteriorSiguiente} | ||
| maximo={maximo} | ||
| /> | ||
| </div> | ||
| </Carousel> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.